@dogsbay/ui 0.2.0-beta.0

package/src/alert-dialog/AlertDialogAction.astro

@@ -0,0 +1,23 @@
+---
+import { tv } from "tailwind-variants";
+
+const alertDialogAction = tv({
+  base: "inline-flex items-center justify-center 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 {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<button
+  class={alertDialogAction({ class: className })}
+  data-part="action"
+  type="button"
+  {...rest}
+>
+  <slot />
+</button>

package/src/alert-dialog/AlertDialogCancel.astro

@@ -0,0 +1,23 @@
+---
+import { tv } from "tailwind-variants";
+
+const alertDialogCancel = tv({
+  base: "inline-flex items-center justify-center 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 {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<button
+  class={alertDialogCancel({ class: className })}
+  data-part="cancel"
+  type="button"
+  {...rest}
+>
+  <slot />
+</button>

package/src/alert-dialog/AlertDialogContent.astro

@@ -0,0 +1,37 @@
+---
+import { tv } from "tailwind-variants";
+
+const alertDialogBackdrop = tv({
+  base: "fixed inset-0 z-50 bg-black/80",
+});
+
+const alertDialogContent = 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={alertDialogBackdrop()}
+  data-part="backdrop"
+  data-state="closed"
+  hidden
+>
+</div>
+<div
+  class={alertDialogContent({ class: className })}
+  data-part="content"
+  role="alertdialog"
+  aria-modal="true"
+  data-state="closed"
+  hidden
+  {...rest}
+>
+  <slot />
+</div>

package/src/alert-dialog/AlertDialogDescription.astro

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

package/src/alert-dialog/AlertDialogFooter.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const alertDialogFooter = 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={alertDialogFooter({ class: className })} {...rest}>
+  <slot />
+</div>

package/src/alert-dialog/AlertDialogHeader.astro

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

package/src/alert-dialog/AlertDialogTitle.astro

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

package/src/alert-dialog/AlertDialogTrigger.astro

@@ -0,0 +1,24 @@
+---
+import { tv } from "tailwind-variants";
+
+const alertDialogTrigger = 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 {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<button
+  class={alertDialogTrigger({ class: className })}
+  data-part="trigger"
+  type="button"
+  aria-haspopup="dialog"
+  {...rest}
+>
+  <slot />
+</button>

package/src/alert-dialog/alert-dialog.ts

@@ -0,0 +1,154 @@
+import { FocusTrap } from "@dogsbay/primitives/focus-trap";
+import { ScrollLock } from "@dogsbay/primitives/scroll-lock";
+import { markOthersInert } from "@dogsbay/primitives/inert";
+import { createPortal } from "@dogsbay/primitives/portal";
+
+interface AlertDialogInstance {
+  root: HTMLElement;
+  trigger: HTMLElement | null;
+  content: HTMLElement;
+  backdrop: HTMLElement;
+  focusTrap: FocusTrap;
+  cleanupPortal: (() => void) | null;
+  cleanupInert: (() => void) | null;
+  open: boolean;
+}
+
+const instances = new WeakMap<HTMLElement, AlertDialogInstance>();
+
+let idCounter = 0;
+function uniqueId(prefix: string) {
+  return `${prefix}-${++idCounter}`;
+}
+
+function init(root: HTMLElement) {
+  if (root.hasAttribute("data-initialized")) return;
+  root.setAttribute("data-initialized", "");
+
+  const ownPart = (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='alert-dialog']") === root) return el;
+    }
+    return null;
+  };
+
+  const content = ownPart("[data-part='content']");
+  const backdrop = ownPart("[data-part='backdrop']");
+  const trigger = ownPart("[data-part='trigger']");
+  if (!content || !backdrop) return;
+
+  const dialogId = content.id || uniqueId("base-alert-dialog");
+  content.id = dialogId;
+
+  if (trigger) {
+    trigger.setAttribute("aria-controls", dialogId);
+    trigger.setAttribute("aria-expanded", "false");
+  }
+
+  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-alert-dialog-title");
+    title.id = titleId;
+    content.setAttribute("aria-labelledby", titleId);
+  }
+  if (description) {
+    const descId = description.id || uniqueId("base-alert-dialog-desc");
+    description.id = descId;
+    content.setAttribute("aria-describedby", descId);
+  }
+
+  const instance: AlertDialogInstance = {
+    root,
+    trigger,
+    content,
+    backdrop,
+    focusTrap: new FocusTrap(content),
+    cleanupPortal: null,
+    cleanupInert: null,
+    open: false,
+  };
+
+  instances.set(root, instance);
+
+  // Trigger click — bound directly since trigger stays in DOM
+  if (trigger) {
+    trigger.addEventListener("click", () => {
+      openAlertDialog(root);
+    });
+  }
+
+  // Action/Cancel clicks — bound to content since it gets portaled
+  content.addEventListener("click", (e) => {
+    const target = e.target as HTMLElement;
+    if (target.closest("[data-part='action']")) {
+      root.dispatchEvent(new CustomEvent("base-alert-dialog:action", { bubbles: true }));
+      closeAlertDialog(root);
+    } else if (target.closest("[data-part='cancel']")) {
+      root.dispatchEvent(new CustomEvent("base-alert-dialog:cancel", { bubbles: true }));
+      closeAlertDialog(root);
+    }
+  });
+
+  // No Escape key dismiss — alert dialogs require explicit action
+  content.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  });
+}
+
+function openAlertDialog(root: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance || instance.open) return;
+  instance.open = true;
+
+  const contentPortal = createPortal(instance.content, instance.content.id);
+  const backdropPortal = createPortal(instance.backdrop, `${instance.content.id}-backdrop`);
+  instance.cleanupPortal = () => { contentPortal(); backdropPortal(); };
+
+  instance.content.hidden = false;
+  instance.backdrop.hidden = false;
+  instance.content.setAttribute("data-state", "open");
+  instance.backdrop.setAttribute("data-state", "open");
+  instance.trigger?.setAttribute("aria-expanded", "true");
+
+  ScrollLock.activate();
+  instance.cleanupInert = markOthersInert(instance.content);
+  instance.focusTrap.activate();
+}
+
+function closeAlertDialog(root: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance || !instance.open) return;
+  instance.open = false;
+
+  instance.focusTrap.deactivate();
+  instance.cleanupInert?.();
+  instance.cleanupInert = null;
+  ScrollLock.deactivate();
+
+  instance.content.setAttribute("data-state", "closed");
+  instance.backdrop.setAttribute("data-state", "closed");
+  instance.trigger?.setAttribute("aria-expanded", "false");
+
+  instance.content.hidden = true;
+  instance.backdrop.hidden = true;
+  instance.cleanupPortal?.();
+  instance.cleanupPortal = null;
+}
+
+function initAll() {
+  document.querySelectorAll<HTMLElement>("[data-component='alert-dialog']").forEach(init);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+document.addEventListener("astro:page-load", initAll);

package/src/alert-dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from "./AlertDialog.astro";
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.astro";
+export { default as AlertDialogContent } from "./AlertDialogContent.astro";
+export { default as AlertDialogHeader } from "./AlertDialogHeader.astro";
+export { default as AlertDialogTitle } from "./AlertDialogTitle.astro";
+export { default as AlertDialogDescription } from "./AlertDialogDescription.astro";
+export { default as AlertDialogFooter } from "./AlertDialogFooter.astro";
+export { default as AlertDialogAction } from "./AlertDialogAction.astro";
+export { default as AlertDialogCancel } from "./AlertDialogCancel.astro";

package/src/api-doc/ApiDoc.astro

@@ -0,0 +1,52 @@
+---
+import CodeBlock from "../code-block/CodeBlock.astro";
+
+interface Props {
+  html: string;
+}
+
+const { html } = Astro.props;
+
+interface Segment {
+  type: "html" | "code";
+  content: string;
+  lang?: string;
+}
+
+function splitCodeBlocks(src: string): Segment[] {
+  const segments: Segment[] = [];
+  const re = /<pre><code(?:\s+class="language-(\w+)")?>([\s\S]*?)<\/code><\/pre>/g;
+  let lastIndex = 0;
+  let match;
+
+  while ((match = re.exec(src)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({ type: "html", content: src.slice(lastIndex, match.index) });
+    }
+    const lang = match[1] || "python";
+    const code = match[2]
+      .replace(/&amp;/g, "&")
+      .replace(/&lt;/g, "<")
+      .replace(/&gt;/g, ">")
+      .replace(/&quot;/g, '"');
+    segments.push({ type: "code", content: code, lang });
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < src.length) {
+    segments.push({ type: "html", content: src.slice(lastIndex) });
+  }
+
+  return segments;
+}
+
+const segments = splitCodeBlocks(html);
+---
+
+{segments.map((seg) =>
+  seg.type === "html" ? (
+    <div class="prose prose-sm dark:prose-invert max-w-none [&>p:first-child]:mt-0 [&>p:last-child]:mb-2" set:html={seg.content} />
+  ) : (
+    <CodeBlock code={seg.content} lang={seg.lang || "python"} />
+  )
+)}

package/src/api-doc/index.ts

@@ -0,0 +1 @@
+export { default as ApiDoc } from "./ApiDoc.astro";

package/src/api-layout/ApiCodePanel.astro

@@ -0,0 +1,21 @@
+---
+/**
+ * Dark-themed container for the right column of an API layout.
+ * Holds code samples, request/response examples.
+ *
+ * Usage:
+ *   <ApiCodePanel>
+ *     <CodeSamples ... />
+ *     <ExampleBlock title="Response 200" json={data} />
+ *   </ApiCodePanel>
+ */
+interface Props {
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<div class:list={["space-y-8", className]}>
+  <slot />
+</div>

package/src/api-layout/ApiLayout.astro

@@ -0,0 +1,29 @@
+---
+/**
+ * Two-column layout for API reference pages.
+ * Description/schema on the left, code/examples on the right (dark background).
+ * Stacks vertically on mobile.
+ *
+ * Usage:
+ *   <ApiLayout>
+ *     <EndpointCard slot="description" ... />
+ *     <ApiCodePanel slot="code">...</ApiCodePanel>
+ *   </ApiLayout>
+ */
+interface Props {
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<div class:list={["grid grid-cols-1 lg:grid-cols-2 lg:min-h-[calc(100vh-3rem)]", className]}>
+  <div class="px-6 py-10 lg:border-r">
+    <slot name="description" />
+  </div>
+  <div class="bg-[var(--api-panel-bg)] text-[var(--api-panel-fg)]">
+    <div class="px-6 py-10 lg:sticky lg:top-12 lg:max-h-[calc(100vh-3rem)] lg:overflow-y-auto">
+      <slot name="code" />
+    </div>
+  </div>
+</div>

package/src/api-layout/ExampleBlock.astro

@@ -0,0 +1,63 @@
+---
+/**
+ * Labeled example block for API pages.
+ * Uses CodeBlock for syntax highlighting and copy button.
+ * Auto-detects language from contentType if lang is not specified.
+ *
+ * Usage:
+ *   <ExampleBlock title="Response 200" json={responseData} />
+ *   <ExampleBlock title="Request Body" json={requestBody} contentType="application/xml" />
+ *   <ExampleBlock title="Custom" code={rawText} lang="yaml" />
+ */
+import CodeBlock from "../code-block/CodeBlock.astro";
+
+interface Props {
+  title: string;
+  json?: unknown;
+  code?: string;
+  lang?: string;
+  contentType?: string;
+  class?: string;
+}
+
+const contentTypeToLang: Record<string, string> = {
+  "application/json": "json",
+  "application/xml": "xml",
+  "application/x-www-form-urlencoded": "plaintext",
+  "text/xml": "xml",
+  "text/html": "html",
+  "text/plain": "plaintext",
+  "text/yaml": "yaml",
+  "application/yaml": "yaml",
+  "application/x-yaml": "yaml",
+  "multipart/form-data": "plaintext",
+};
+
+function detectLang(contentType?: string): string {
+  if (!contentType) return "json";
+  // Exact match
+  if (contentTypeToLang[contentType]) return contentTypeToLang[contentType];
+  // Match base type (ignore parameters like charset)
+  const base = contentType.split(";")[0].trim();
+  if (contentTypeToLang[base]) return contentTypeToLang[base];
+  // Fallback heuristics
+  if (base.includes("json")) return "json";
+  if (base.includes("xml")) return "xml";
+  if (base.includes("yaml") || base.includes("yml")) return "yaml";
+  return "json";
+}
+
+const { title, json, code, lang, contentType, class: className } = Astro.props;
+
+const resolvedLang = lang || detectLang(contentType);
+const content = code || (json !== undefined && json !== null ? JSON.stringify(json, null, 2) : null);
+---
+
+{content && (
+  <div class={className}>
+    <h3 class="mb-3 text-xs font-semibold uppercase tracking-wider text-white/60">
+      {title}
+    </h3>
+    <CodeBlock code={content} lang={resolvedLang} copy={true} />
+  </div>
+)}

package/src/api-params/ApiParams.astro

@@ -0,0 +1,96 @@
+---
+import CodeBlock from "../code-block/CodeBlock.astro";
+
+interface Param {
+  name: string;
+  type: string | null;
+  default: string | null;
+  required: boolean;
+  doc: string | null;
+  docHtml: string | null;
+}
+
+interface Props {
+  params: Param[];
+}
+
+const { params } = Astro.props;
+
+/**
+ * Split rendered HTML into segments: regular HTML and code blocks.
+ * Code blocks get rendered through our CodeBlock component with Shiki.
+ */
+interface Segment {
+  type: "html" | "code";
+  content: string;
+  lang?: string;
+}
+
+function splitCodeBlocks(html: string): Segment[] {
+  const segments: Segment[] = [];
+  const codeBlockRe = /<pre><code(?:\s+class="language-(\w+)")?>([\s\S]*?)<\/code><\/pre>/g;
+  let lastIndex = 0;
+  let match;
+
+  while ((match = codeBlockRe.exec(html)) !== null) {
+    // HTML before the code block
+    if (match.index > lastIndex) {
+      segments.push({ type: "html", content: html.slice(lastIndex, match.index) });
+    }
+    // The code block itself
+    const lang = match[1] || "python";
+    const code = match[2]
+      .replace(/&amp;/g, "&")
+      .replace(/&lt;/g, "<")
+      .replace(/&gt;/g, ">")
+      .replace(/&quot;/g, '"');
+    segments.push({ type: "code", content: code, lang });
+    lastIndex = match.index + match[0].length;
+  }
+
+  // Remaining HTML after last code block
+  if (lastIndex < html.length) {
+    segments.push({ type: "html", content: html.slice(lastIndex) });
+  }
+
+  return segments;
+}
+---
+
+<table class="api-params w-full text-sm border-collapse not-prose">
+  <thead>
+    <tr class="border-b border-border">
+      <th class="py-3 px-4 text-left font-semibold text-muted-foreground uppercase tracking-wider text-xs w-[140px]">Parameter</th>
+      <th class="py-3 px-4 text-left font-semibold text-muted-foreground uppercase tracking-wider text-xs">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    {params.map((p) => {
+      const segments = p.docHtml ? splitCodeBlocks(p.docHtml) : [];
+      return (
+        <tr class="border-b border-border/50">
+          <td class="py-3 px-4 align-top">
+            <code class="text-sm font-medium">{p.name}</code>
+          </td>
+          <td class="py-3 px-4 align-top">
+            {segments.map((seg) =>
+              seg.type === "html" ? (
+                <div class="prose prose-sm dark:prose-invert max-w-none [&>p:first-child]:mt-0 [&>p:last-child]:mb-0" set:html={seg.content} />
+              ) : (
+                <CodeBlock code={seg.content} lang={seg.lang || "python"} />
+              )
+            )}
+            <div class="flex items-center gap-4 mt-2 text-xs text-muted-foreground">
+              {p.type && (
+                <span><strong>TYPE:</strong> <code class="text-xs">{p.type}</code></span>
+              )}
+              {p.default && (
+                <span class="ml-auto"><strong>DEFAULT:</strong> <code class="text-xs">{p.default}</code></span>
+              )}
+            </div>
+          </td>
+        </tr>
+      );
+    })}
+  </tbody>
+</table>

package/src/api-params/index.ts

@@ -0,0 +1 @@
+export { default as ApiParams } from "./ApiParams.astro";

package/src/api-source/ApiSource.astro

@@ -0,0 +1,20 @@
+---
+import CodeBlock from "../code-block/CodeBlock.astro";
+import "./api-source.css";
+
+interface Props {
+  code: string;
+  file?: string;
+  line?: number;
+}
+
+const { code, file, line } = Astro.props;
+const label = file
+  ? `Source code in ${file}${line ? `, line ${line}` : ""}`
+  : "Source code";
+---
+
+<details class="api-source">
+  <summary>{label}</summary>
+  <CodeBlock code={code} lang="python" />
+</details>

package/src/api-source/api-source.css

@@ -0,0 +1,32 @@
+.api-source {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  border: 1px solid var(--color-border, oklch(0.85 0 0));
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.api-source summary {
+  cursor: pointer;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-muted-foreground, oklch(0.55 0 0));
+  background: var(--color-muted, oklch(0.96 0 0));
+  user-select: none;
+}
+
+.api-source summary:hover {
+  color: var(--color-foreground, oklch(0.15 0 0));
+}
+
+.api-source[open] summary {
+  border-bottom: 1px solid var(--color-border, oklch(0.85 0 0));
+}
+
+/* Remove extra margin from the code block inside */
+.api-source :global(pre) {
+  margin: 0 !important;
+  border-radius: 0 !important;
+  border: none !important;
+}

package/src/api-source/index.ts

@@ -0,0 +1 @@
+export { default as ApiSource } from "./ApiSource.astro";