@dogsbay/ui 0.2.0-beta.0

package/src/dropdown-menu/DropdownMenuGroup.astro

@@ -0,0 +1,17 @@
+---
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={className}
+  data-part="group"
+  role="group"
+  {...rest}
+>
+  <slot />
+</div>

package/src/dropdown-menu/DropdownMenuItem.astro

@@ -0,0 +1,48 @@
+---
+import { tv, type VariantProps } from "tailwind-variants";
+
+const dropdownMenuItem = tv({
+  base: "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+  variants: {
+    variant: {
+      default: "",
+      destructive:
+        "text-destructive focus:bg-destructive focus:text-destructive-foreground",
+    },
+    inset: {
+      true: "pl-8",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+type MenuItemVariants = VariantProps<typeof dropdownMenuItem>;
+
+interface Props {
+  variant?: MenuItemVariants["variant"];
+  inset?: boolean;
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  variant = "default",
+  inset = false,
+  disabled = false,
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class={dropdownMenuItem({ variant, inset: inset || undefined, class: className })}
+  data-part="item"
+  role="menuitem"
+  data-disabled={disabled ? "true" : undefined}
+  {...rest}
+>
+  <slot />
+</div>

package/src/dropdown-menu/DropdownMenuLabel.astro

@@ -0,0 +1,28 @@
+---
+import { tv } from "tailwind-variants";
+
+const dropdownMenuLabel = tv({
+  base: "px-2 py-1.5 text-sm font-semibold",
+  variants: {
+    inset: {
+      true: "pl-8",
+    },
+  },
+});
+
+interface Props {
+  inset?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { inset = false, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={dropdownMenuLabel({ inset: inset || undefined, class: className })}
+  data-part="label"
+  {...rest}
+>
+  <slot />
+</div>

package/src/dropdown-menu/DropdownMenuSeparator.astro

@@ -0,0 +1,21 @@
+---
+import { tv } from "tailwind-variants";
+
+const dropdownMenuSeparator = tv({
+  base: "-mx-1 my-1 h-px bg-muted",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={dropdownMenuSeparator({ class: className })}
+  role="separator"
+  {...rest}
+>
+</div>

package/src/dropdown-menu/DropdownMenuShortcut.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const dropdownMenuShortcut = tv({
+  base: "ml-auto text-xs tracking-widest text-muted-foreground",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<span class={dropdownMenuShortcut({ class: className })} {...rest}>
+  <slot />
+</span>

package/src/dropdown-menu/DropdownMenuTrigger.astro

@@ -0,0 +1,34 @@
+---
+import { tv } from "tailwind-variants";
+
+const dropdownMenuTrigger = tv({
+  base: "inline-flex items-center justify-center",
+});
+
+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={dropdownMenuTrigger({ class: className })}
+      data-part="trigger"
+      type="button"
+      aria-haspopup="menu"
+      aria-expanded="false"
+      {...rest}
+    >
+      <slot />
+    </button>
+  )
+}

package/src/dropdown-menu/dropdown-menu.ts

@@ -0,0 +1,348 @@
+import { DismissController } from "@dogsbay/primitives/dismiss";
+import { createPortal } from "@dogsbay/primitives/portal";
+import { setupFloating } from "@dogsbay/primitives/floating";
+import { Typeahead } from "@dogsbay/primitives/typeahead";
+
+interface DropdownMenuInstance {
+  root: HTMLElement;
+  trigger: HTMLElement;
+  content: HTMLElement;
+  items: HTMLElement[];
+  dismiss: DismissController;
+  typeahead: Typeahead;
+  cleanupPortal: (() => void) | null;
+  cleanupFloating: (() => void) | null;
+  open: boolean;
+  highlightedIndex: number;
+}
+
+const instances = new WeakMap<HTMLElement, DropdownMenuInstance>();
+
+let idCounter = 0;
+function uniqueId(prefix: string) {
+  return `${prefix}-${++idCounter}`;
+}
+
+function getEnabledItems(items: HTMLElement[]): HTMLElement[] {
+  return items.filter(
+    (item) => item.getAttribute("data-disabled") !== "true",
+  );
+}
+
+function initDropdownMenu(root: HTMLElement) {
+  if (instances.has(root)) return;
+
+  const trigger = root.querySelector(
+    "[data-part='trigger']",
+  ) as HTMLElement | null;
+  const content = root.querySelector(
+    "[data-part='content']",
+  ) as HTMLElement | null;
+
+  if (!trigger || !content) return;
+
+  const items = Array.from(
+    content.querySelectorAll("[data-part='item']"),
+  ) as HTMLElement[];
+
+  // Generate IDs
+  const menuId = uniqueId("base-dropdown-menu");
+  const contentId = content.id || `${menuId}-menu`;
+  content.id = contentId;
+  trigger.setAttribute("aria-controls", contentId);
+
+  items.forEach((item, i) => {
+    const itemId = item.id || `${menuId}-item-${i}`;
+    item.id = itemId;
+    item.setAttribute("tabindex", "-1");
+  });
+
+  // Link groups to their labels
+  content.querySelectorAll("[data-part='group']").forEach((group) => {
+    const label = group.querySelector("[data-part='label']") as HTMLElement;
+    if (label) {
+      const labelId = label.id || uniqueId("base-dropdown-menu-label");
+      label.id = labelId;
+      (group as HTMLElement).setAttribute("aria-labelledby", labelId);
+    }
+  });
+
+  const typeahead = new Typeahead({
+    onMatch: (index) => {
+      const enabledItems = getEnabledItems(items);
+      if (index < enabledItems.length) {
+        const actualIndex = items.indexOf(enabledItems[index]);
+        highlightItem(root, actualIndex);
+      }
+    },
+    getItemText: (i) => {
+      const enabledItems = getEnabledItems(items);
+      return enabledItems[i]?.textContent?.trim() || "";
+    },
+    getItemCount: () => getEnabledItems(items).length,
+  });
+
+  const instance: DropdownMenuInstance = {
+    root,
+    trigger,
+    content,
+    items,
+    dismiss: new DismissController(content, {
+      onDismiss: () => closeDropdownMenu(root),
+    }),
+    typeahead,
+    cleanupPortal: null,
+    cleanupFloating: null,
+    open: false,
+    highlightedIndex: -1,
+  };
+
+  instances.set(root, instance);
+
+  // Resolve the actual interactive element for asChild
+  const actualTrigger = trigger.hasAttribute("data-as-child")
+    ? (trigger.firstElementChild as HTMLElement) || trigger
+    : trigger;
+
+  // Copy ARIA attributes to actual trigger for asChild
+  if (trigger.hasAttribute("data-as-child")) {
+    actualTrigger.setAttribute("aria-haspopup", "menu");
+    actualTrigger.setAttribute("aria-expanded", "false");
+    actualTrigger.setAttribute("aria-controls", contentId);
+  }
+
+  // Trigger click
+  actualTrigger.addEventListener("click", () => {
+    if (instance.open) {
+      closeDropdownMenu(root);
+    } else {
+      openDropdownMenu(root);
+    }
+  });
+
+  // Trigger keyboard: open on Enter/Space/ArrowDown
+  actualTrigger.addEventListener("keydown", (e) => {
+    if (instance.open) return; // When open, keyboard is on content
+
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      openDropdownMenu(root);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      openDropdownMenu(root);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      openDropdownMenu(root, "last");
+    }
+  });
+
+  // Content keyboard: navigate and select
+  content.addEventListener("keydown", (e) => {
+    if (!instance.open) return;
+
+    const enabledItems = getEnabledItems(items);
+    if (enabledItems.length === 0) return;
+
+    const currentHighlighted =
+      instance.highlightedIndex >= 0 ? items[instance.highlightedIndex] : null;
+    const currentEnabledIndex = currentHighlighted
+      ? enabledItems.indexOf(currentHighlighted)
+      : -1;
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const nextIdx =
+        currentEnabledIndex < enabledItems.length - 1
+          ? currentEnabledIndex + 1
+          : 0;
+      highlightItem(root, items.indexOf(enabledItems[nextIdx]));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const prevIdx =
+        currentEnabledIndex > 0
+          ? currentEnabledIndex - 1
+          : enabledItems.length - 1;
+      highlightItem(root, items.indexOf(enabledItems[prevIdx]));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      highlightItem(root, items.indexOf(enabledItems[0]));
+    } else if (e.key === "End") {
+      e.preventDefault();
+      highlightItem(
+        root,
+        items.indexOf(enabledItems[enabledItems.length - 1]),
+      );
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (instance.highlightedIndex >= 0) {
+        const item = items[instance.highlightedIndex];
+        item.click();
+      }
+      closeDropdownMenu(root);
+    } else if (e.key === "Tab") {
+      closeDropdownMenu(root);
+    } else if (e.key.length === 1) {
+      typeahead.handle(e.key);
+    }
+  });
+
+  // Item click and hover
+  items.forEach((item) => {
+    item.addEventListener("click", (e) => {
+      if (item.getAttribute("data-disabled") === "true") {
+        e.preventDefault();
+        return;
+      }
+      closeDropdownMenu(root);
+    });
+
+    item.addEventListener("pointerenter", () => {
+      if (item.getAttribute("data-disabled") === "true") return;
+      highlightItem(root, items.indexOf(item));
+    });
+
+    item.addEventListener("pointerleave", () => {
+      clearHighlight(root);
+    });
+  });
+}
+
+function openDropdownMenu(root: HTMLElement, initialFocus: "first" | "last" = "first") {
+  const instance = instances.get(root);
+  if (!instance || instance.open) return;
+  instance.open = true;
+
+  // Resolve asChild trigger
+  const actualTrigger = instance.trigger.hasAttribute("data-as-child")
+    ? (instance.trigger.firstElementChild as HTMLElement) || instance.trigger
+    : instance.trigger;
+
+  // Portal
+  instance.cleanupPortal = createPortal(instance.content, instance.content.id);
+
+  // Show
+  instance.content.hidden = false;
+  instance.content.setAttribute("data-state", "open");
+  actualTrigger.setAttribute("aria-expanded", "true");
+
+  // Read placement from content data attribute
+  const side = instance.content.dataset.side || "bottom";
+  const align = instance.content.dataset.align || "start";
+  const placement = `${side}-${align}` as import("@floating-ui/dom").Placement;
+
+  // Position
+  instance.cleanupFloating = setupFloating(
+    actualTrigger,
+    instance.content,
+    {
+      placement,
+      offset: 4,
+    },
+  );
+
+  // Focus first/last enabled item
+  const enabledItems = getEnabledItems(instance.items);
+  if (enabledItems.length > 0) {
+    const targetItem =
+      initialFocus === "last"
+        ? enabledItems[enabledItems.length - 1]
+        : enabledItems[0];
+    highlightItem(root, instance.items.indexOf(targetItem));
+  }
+
+  // Dismiss
+  instance.dismiss.activate();
+
+  // Reset typeahead
+  instance.typeahead.reset();
+}
+
+function closeDropdownMenu(root: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance || !instance.open) return;
+  instance.open = false;
+
+  instance.dismiss.deactivate();
+
+  // Resolve asChild trigger
+  const actualTrigger = instance.trigger.hasAttribute("data-as-child")
+    ? (instance.trigger.firstElementChild as HTMLElement) || instance.trigger
+    : instance.trigger;
+
+  // Update state
+  instance.content.setAttribute("data-state", "closed");
+  actualTrigger.setAttribute("aria-expanded", "false");
+
+  // Clear highlights
+  clearHighlight(root);
+
+  // Hide and cleanup
+  instance.content.hidden = true;
+  if (instance.cleanupFloating) {
+    instance.cleanupFloating();
+    instance.cleanupFloating = null;
+  }
+  if (instance.cleanupPortal) {
+    instance.cleanupPortal();
+    instance.cleanupPortal = null;
+  }
+
+  // Return focus to trigger
+  actualTrigger.focus();
+
+  // Reset typeahead
+  instance.typeahead.reset();
+}
+
+function highlightItem(root: HTMLElement, index: number) {
+  const instance = instances.get(root);
+  if (!instance) return;
+  if (index < 0 || index >= instance.items.length) return;
+
+  // Clear previous highlight
+  if (instance.highlightedIndex >= 0) {
+    const prev = instance.items[instance.highlightedIndex];
+    prev.removeAttribute("data-highlighted");
+    prev.setAttribute("tabindex", "-1");
+  }
+
+  // Set new highlight
+  instance.highlightedIndex = index;
+  const item = instance.items[index];
+  item.setAttribute("data-highlighted", "");
+  item.setAttribute("tabindex", "0");
+  item.focus();
+
+  // Scroll into view
+  item.scrollIntoView({ block: "nearest" });
+}
+
+function clearHighlight(root: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance) return;
+
+  if (instance.highlightedIndex >= 0) {
+    const prev = instance.items[instance.highlightedIndex];
+    prev.removeAttribute("data-highlighted");
+    prev.setAttribute("tabindex", "-1");
+  }
+  instance.highlightedIndex = -1;
+}
+
+// Auto-initialize
+function init() {
+  document
+    .querySelectorAll("[data-component='dropdown-menu']")
+    .forEach((el) => {
+      initDropdownMenu(el as HTMLElement);
+    });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+document.addEventListener("astro:page-load", init);
+
+export { initDropdownMenu, openDropdownMenu, closeDropdownMenu };

package/src/dropdown-menu/index.ts

@@ -0,0 +1,8 @@
+export { default as DropdownMenu } from "./DropdownMenu.astro";
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.astro";
+export { default as DropdownMenuContent } from "./DropdownMenuContent.astro";
+export { default as DropdownMenuItem } from "./DropdownMenuItem.astro";
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.astro";
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.astro";
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.astro";
+export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.astro";

package/src/endpoint-card/EndpointCard.astro

@@ -0,0 +1,60 @@
+---
+/**
+ * API endpoint card with URL bar and collapsible sections.
+ *
+ * Usage:
+ *   <EndpointCard method="get" path="/pet/{petId}" baseUrl="https://petstore.swagger.io/api/v3">
+ *     <EndpointSection value="parameters" title="Parameters" default>
+ *       <PropertyList parameters={params} />
+ *     </EndpointSection>
+ *     <EndpointSection value="responses" title="Responses">
+ *       <ResponseTabs responses={responses} />
+ *     </EndpointSection>
+ *   </EndpointCard>
+ */
+import { tv } from "tailwind-variants";
+import ApiUrlBar from "../api-url-bar/ApiUrlBar.astro";
+import Badge from "../badge/Badge.astro";
+
+const endpointCard = tv({
+  base: "space-y-4",
+});
+
+interface Props {
+  method: "get" | "post" | "put" | "patch" | "delete" | "head" | "options";
+  path: string;
+  baseUrl?: string;
+  summary?: string;
+  description?: string;
+  deprecated?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { method, path, baseUrl, summary, description, deprecated = false, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={endpointCard({ class: className })}
+  data-component="endpoint-card"
+  data-deprecated={deprecated ? "" : undefined}
+  {...rest}
+>
+  <ApiUrlBar method={method} path={path} baseUrl={baseUrl} />
+
+  {deprecated && (
+    <div class="flex items-center gap-2 rounded-lg border border-api-deprecated/30 bg-api-deprecated/10 px-4 py-2 text-sm text-api-deprecated">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg>
+      <span>This endpoint is deprecated.</span>
+    </div>
+  )}
+
+  {summary && <p class="text-sm text-muted-foreground">{summary}</p>}
+  {description && description !== summary && (
+    <div class="text-sm text-muted-foreground" set:html={description} />
+  )}
+
+  <div class="space-y-3">
+    <slot />
+  </div>
+</div>

package/src/endpoint-card/EndpointCardSection.astro

@@ -0,0 +1,22 @@
+---
+import { tv } from "tailwind-variants";
+
+const sectionTitle = tv({
+  base: "px-6 py-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground bg-muted/50",
+});
+
+interface Props {
+  title: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { title, class: className, ...rest } = Astro.props;
+---
+
+<div class={className} {...rest}>
+  <h3 class={sectionTitle()}>{title}</h3>
+  <div class="px-6 py-4">
+    <slot />
+  </div>
+</div>

package/src/endpoint-card/EndpointSection.astro

@@ -0,0 +1,35 @@
+---
+/**
+ * Collapsible section within an EndpointCard.
+ * Uses native <details>/<summary> for zero-JS expand/collapse.
+ *
+ * Usage:
+ *   <EndpointSection title="Parameters" open>
+ *     <PropertyList ... />
+ *   </EndpointSection>
+ */
+
+interface Props {
+  title: string;
+  open?: boolean;
+  class?: string;
+}
+
+const { title, open = true, class: className } = Astro.props;
+---
+
+<details open={open} class:list={["rounded-lg border bg-card", className]}>
+  <summary class="flex cursor-pointer items-center gap-2 px-4 py-3 text-sm font-semibold list-none [&::-webkit-details-marker]:hidden hover:bg-muted/50 select-none">
+    <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" class="size-3.5 shrink-0 text-muted-foreground transition-transform duration-200" data-section-chevron aria-hidden="true"><polyline points="9 18 15 12 9 6" /></svg>
+    <span>{title}</span>
+  </summary>
+  <div class="px-4 pb-4 pt-1">
+    <slot />
+  </div>
+</details>
+
+<style is:global>
+  details[open] > summary [data-section-chevron] {
+    transform: rotate(90deg);
+  }
+</style>

package/src/field/Field.astro

@@ -0,0 +1,31 @@
+---
+import { tv } from "tailwind-variants";
+
+const field = tv({
+  base: "space-y-2",
+});
+
+interface Props {
+  name?: string;
+  error?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { name, error, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={field({ class: className })}
+  data-component="field"
+  data-name={name}
+  data-invalid={error ? "" : undefined}
+  {...rest}
+>
+  <slot />
+  {error && (
+    <p class="text-sm font-medium text-destructive" data-part="error" role="alert">
+      {error}
+    </p>
+  )}
+</div>