@dogsbay/ui 0.2.0-beta.0

package/src/navigation-menu/NavigationMenuTrigger.astro

@@ -0,0 +1,40 @@
+---
+import { tv } from "tailwind-variants";
+
+const navigationMenuTrigger = tv({
+  base: "group inline-flex items-center gap-1 rounded-md px-3 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={navigationMenuTrigger({ class: className })}
+  data-part="trigger"
+  type="button"
+  aria-expanded="false"
+  {...rest}
+>
+  <slot />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    class="shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180"
+    data-chevron
+  >
+    <path d="m6 9 6 6 6-6"></path>
+  </svg>
+</button>

package/src/navigation-menu/index.ts

@@ -0,0 +1,6 @@
+export { default as NavigationMenu } from "./NavigationMenu.astro";
+export { default as NavigationMenuList } from "./NavigationMenuList.astro";
+export { default as NavigationMenuItem } from "./NavigationMenuItem.astro";
+export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.astro";
+export { default as NavigationMenuContent } from "./NavigationMenuContent.astro";
+export { default as NavigationMenuLink } from "./NavigationMenuLink.astro";

package/src/navigation-menu/navigation-menu.ts

@@ -0,0 +1,192 @@
+interface NavMenuInstance {
+  root: HTMLElement;
+  items: {
+    item: HTMLElement;
+    trigger: HTMLElement;
+    content: HTMLElement;
+  }[];
+  activeIndex: number;
+  hoverTimeout: ReturnType<typeof setTimeout> | null;
+  lastOpenTime: number;
+  cleanupOutsideClick: (() => void) | null;
+}
+
+const instances = new WeakMap<HTMLElement, NavMenuInstance>();
+
+let idCounter = 0;
+function uniqueId(prefix: string) {
+  return `${prefix}-${++idCounter}`;
+}
+
+const DELAY_OPEN = 200;
+const DELAY_SKIP = 0;
+
+function initNavigationMenu(root: HTMLElement) {
+  if (instances.has(root)) return;
+
+  const itemElements = Array.from(
+    root.querySelectorAll<HTMLElement>("[data-part='item']"),
+  ).filter((el) => el.closest("[data-component='navigation-menu']") === root);
+
+  const items: NavMenuInstance["items"] = [];
+
+  for (const item of itemElements) {
+    const trigger = item.querySelector<HTMLElement>("[data-part='trigger']");
+    const content = item.querySelector<HTMLElement>("[data-part='content']");
+    if (!trigger || !content) continue;
+
+    // Generate IDs for ARIA linkage
+    const contentId = content.id || uniqueId("base-navmenu-content");
+    content.id = contentId;
+    trigger.setAttribute("aria-controls", contentId);
+
+    items.push({ item, trigger, content });
+  }
+
+  const instance: NavMenuInstance = {
+    root,
+    items,
+    activeIndex: -1,
+    hoverTimeout: null,
+    lastOpenTime: 0,
+    cleanupOutsideClick: null,
+  };
+
+  instances.set(root, instance);
+
+  const openOnHover = root.getAttribute("data-open-on-hover") !== "false";
+
+  // Bind events for each trigger/content pair
+  for (let i = 0; i < items.length; i++) {
+    const { item, trigger } = items[i];
+
+    // Click to toggle
+    trigger.addEventListener("click", () => {
+      if (instance.activeIndex === i) {
+        close(instance);
+      } else {
+        open(instance, i);
+      }
+    });
+
+    if (openOnHover) {
+      // Hover to open (with delay logic)
+      item.addEventListener("mouseenter", () => {
+        clearHoverTimeout(instance);
+
+        const hasOpenPanel = instance.activeIndex >= 0;
+        const delay = hasOpenPanel ? DELAY_SKIP : DELAY_OPEN;
+
+        instance.hoverTimeout = setTimeout(() => {
+          open(instance, i);
+        }, delay);
+      });
+
+      item.addEventListener("mouseleave", () => {
+        clearHoverTimeout(instance);
+
+        instance.hoverTimeout = setTimeout(() => {
+          close(instance);
+        }, DELAY_OPEN);
+      });
+    }
+
+    // Keyboard: Escape to close
+    trigger.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && instance.activeIndex >= 0) {
+        e.preventDefault();
+        const activeTrigger = items[instance.activeIndex]?.trigger;
+        close(instance);
+        activeTrigger?.focus();
+      }
+    });
+  }
+
+  // Also handle Escape from within content panels
+  for (let i = 0; i < items.length; i++) {
+    items[i].content.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        const trigger = items[i].trigger;
+        close(instance);
+        trigger.focus();
+      }
+    });
+  }
+}
+
+function clearHoverTimeout(instance: NavMenuInstance) {
+  if (instance.hoverTimeout !== null) {
+    clearTimeout(instance.hoverTimeout);
+    instance.hoverTimeout = null;
+  }
+}
+
+function open(instance: NavMenuInstance, index: number) {
+  // Close any currently open panel first
+  if (instance.activeIndex >= 0 && instance.activeIndex !== index) {
+    const prev = instance.items[instance.activeIndex];
+    prev.content.hidden = true;
+    prev.content.setAttribute("data-state", "closed");
+    prev.trigger.setAttribute("aria-expanded", "false");
+    prev.trigger.setAttribute("data-state", "closed");
+  }
+
+  const { trigger, content } = instance.items[index];
+  content.hidden = false;
+  content.setAttribute("data-state", "open");
+  trigger.setAttribute("aria-expanded", "true");
+  trigger.setAttribute("data-state", "open");
+  instance.activeIndex = index;
+  instance.lastOpenTime = Date.now();
+
+  // Setup outside click handler
+  if (!instance.cleanupOutsideClick) {
+    const handler = (e: MouseEvent) => {
+      if (!instance.root.contains(e.target as Node)) {
+        close(instance);
+      }
+    };
+    document.addEventListener("click", handler, true);
+    instance.cleanupOutsideClick = () => {
+      document.removeEventListener("click", handler, true);
+    };
+  }
+}
+
+function close(instance: NavMenuInstance) {
+  if (instance.activeIndex < 0) return;
+
+  const { trigger, content } = instance.items[instance.activeIndex];
+  content.hidden = true;
+  content.setAttribute("data-state", "closed");
+  trigger.setAttribute("aria-expanded", "false");
+  trigger.setAttribute("data-state", "closed");
+  instance.activeIndex = -1;
+
+  clearHoverTimeout(instance);
+
+  // Cleanup outside click handler
+  if (instance.cleanupOutsideClick) {
+    instance.cleanupOutsideClick();
+    instance.cleanupOutsideClick = null;
+  }
+}
+
+// Auto-initialize
+function init() {
+  document
+    .querySelectorAll("[data-component='navigation-menu']")
+    .forEach((el) => {
+      initNavigationMenu(el as HTMLElement);
+    });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+document.addEventListener("astro:page-load", init);
+
+export { initNavigationMenu };

package/src/number-field/NumberField.astro

@@ -0,0 +1,84 @@
+---
+import { tv } from "tailwind-variants";
+
+const numberField = tv({
+  base: "inline-flex items-center gap-0",
+});
+
+const numberInput = tv({
+  base: "flex h-10 w-20 border border-input bg-background px-3 py-2 text-center text-sm text-foreground ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+});
+
+const numberButton = tv({
+  base: "inline-flex h-10 w-10 items-center justify-center border border-input bg-background 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 disabled:pointer-events-none disabled:opacity-50",
+});
+
+interface Props {
+  name?: string;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  name,
+  defaultValue = 0,
+  min,
+  max,
+  step = 1,
+  disabled = false,
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class={numberField({ class: className })}
+  data-component="number-field"
+  data-min={min}
+  data-max={max}
+  data-step={step}
+  data-disabled={disabled || undefined}
+  role="group"
+  {...rest}
+>
+  <button
+    class={`${numberButton()} rounded-l-md border-r-0`}
+    data-part="decrement"
+    type="button"
+    aria-label="Decrease"
+    disabled={disabled || undefined}
+    tabindex="-1"
+  >
+    <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="M5 12h14"/></svg>
+  </button>
+  <input
+    class={numberInput()}
+    data-part="input"
+    type="text"
+    inputmode="numeric"
+    pattern="[0-9]*"
+    name={name}
+    value={String(defaultValue)}
+    disabled={disabled || undefined}
+    aria-valuenow={defaultValue}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-label={name || "Number"}
+    role="spinbutton"
+  />
+  <button
+    class={`${numberButton()} rounded-r-md border-l-0`}
+    data-part="increment"
+    type="button"
+    aria-label="Increase"
+    disabled={disabled || undefined}
+    tabindex="-1"
+  >
+    <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="M5 12h14"/><path d="M12 5v14"/></svg>
+  </button>
+</div>

package/src/number-field/index.ts

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

package/src/number-field/number-field.ts

@@ -0,0 +1,68 @@
+function init(root: HTMLElement) {
+  if (root.hasAttribute("data-initialized")) return;
+  root.setAttribute("data-initialized", "");
+
+  const input = root.querySelector<HTMLInputElement>("[data-part='input']");
+  const decrement = root.querySelector<HTMLButtonElement>("[data-part='decrement']");
+  const increment = root.querySelector<HTMLButtonElement>("[data-part='increment']");
+  if (!input) return;
+
+  const min = root.hasAttribute("data-min") ? Number(root.getAttribute("data-min")) : -Infinity;
+  const max = root.hasAttribute("data-max") ? Number(root.getAttribute("data-max")) : Infinity;
+  const step = Number(root.getAttribute("data-step") || "1");
+
+  function getValue(): number {
+    return Number(input!.value) || 0;
+  }
+
+  function setValue(n: number) {
+    const clamped = Math.min(max, Math.max(min, n));
+    // Round to step precision
+    const rounded = Math.round(clamped / step) * step;
+    const fixed = Number(rounded.toFixed(10));
+    input!.value = String(fixed);
+    input!.setAttribute("aria-valuenow", String(fixed));
+    updateButtons();
+    root.dispatchEvent(new CustomEvent("change", { detail: { value: fixed }, bubbles: true }));
+  }
+
+  function updateButtons() {
+    const val = getValue();
+    if (decrement) {
+      decrement.disabled = val <= min || root.hasAttribute("data-disabled");
+    }
+    if (increment) {
+      increment.disabled = val >= max || root.hasAttribute("data-disabled");
+    }
+  }
+
+  decrement?.addEventListener("click", () => setValue(getValue() - step));
+  increment?.addEventListener("click", () => setValue(getValue() + step));
+
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setValue(getValue() + step);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setValue(getValue() - step);
+    }
+  });
+
+  input.addEventListener("blur", () => {
+    setValue(getValue());
+  });
+
+  updateButtons();
+}
+
+function initAll() {
+  document.querySelectorAll<HTMLElement>("[data-component='number-field']").forEach(init);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+document.addEventListener("astro:page-load", initAll);

package/src/pagination/Pagination.astro

@@ -0,0 +1,59 @@
+---
+import { tv } from "tailwind-variants";
+
+const pagination = tv({
+  base: "flex items-center justify-between gap-4",
+});
+
+const paginationLink = tv({
+  base: "inline-flex items-center gap-2 rounded-md border border-border 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",
+});
+
+const paginationLabel = tv({
+  base: "text-xs text-muted-foreground",
+});
+
+const paginationTitle = tv({
+  base: "text-sm font-medium",
+});
+
+interface PaginationLink {
+  label: string;
+  href: string;
+}
+
+interface Props {
+  prev?: PaginationLink;
+  next?: PaginationLink;
+  "aria-label"?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { prev, next, "aria-label": ariaLabel = "Pagination", class: className, ...rest } = Astro.props;
+---
+
+<nav class={pagination({ class: className })} aria-label={ariaLabel} {...rest}>
+  {prev ? (
+    <a href={prev.href} class={paginationLink()} rel="prev">
+      <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" aria-hidden="true"><polyline points="15 18 9 12 15 6"></polyline></svg>
+      <div class="text-left">
+        <div class={paginationLabel()}>Previous</div>
+        <div class={paginationTitle()}>{prev.label}</div>
+      </div>
+    </a>
+  ) : (
+    <div></div>
+  )}
+  {next ? (
+    <a href={next.href} class={paginationLink()} rel="next">
+      <div class="text-right">
+        <div class={paginationLabel()}>Next</div>
+        <div class={paginationTitle()}>{next.label}</div>
+      </div>
+      <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" aria-hidden="true"><polyline points="9 18 15 12 9 6"></polyline></svg>
+    </a>
+  ) : (
+    <div></div>
+  )}
+</nav>

package/src/pagination/index.ts

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

package/src/parameter-table/ParameterTable.astro

@@ -0,0 +1,75 @@
+---
+import { tv } from "tailwind-variants";
+
+interface Parameter {
+  name: string;
+  in: "path" | "query" | "header" | "cookie";
+  type: string;
+  required?: boolean;
+  description?: string;
+  default?: string;
+  enum?: string[];
+  deprecated?: boolean;
+}
+
+interface Props {
+  parameters: Parameter[];
+  class?: string;
+}
+
+const { parameters, class: className } = Astro.props;
+
+const locationBadge = tv({
+  base: "inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium uppercase",
+  variants: {
+    location: {
+      path: "bg-api-put/20 text-api-put",
+      query: "bg-api-post/20 text-api-post",
+      header: "bg-api-head/20 text-api-head",
+      cookie: "bg-muted/20 text-muted-foreground",
+    },
+  },
+});
+---
+
+<div class:list={["overflow-x-auto", className]}>
+  <table class="w-full text-sm">
+    <thead>
+      <tr class="border-b text-left text-xs text-muted-foreground">
+        <th class="pb-2 pr-4 font-medium">Name</th>
+        <th class="pb-2 pr-4 font-medium">Type</th>
+        <th class="pb-2 pr-4 font-medium">In</th>
+        <th class="pb-2 font-medium">Description</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y">
+      {parameters.map((param) => (
+        <tr class:list={[param.deprecated && "opacity-60"]}>
+          <td class="py-3 pr-4 align-top">
+            <code class="text-sm font-medium">{param.name}</code>
+            {param.required && <span class="ml-1 text-api-required text-xs">*</span>}
+          </td>
+          <td class="py-3 pr-4 align-top">
+            <code class="text-xs text-muted-foreground">{param.type}</code>
+            {param.enum && (
+              <div class="mt-1 flex flex-wrap gap-1">
+                {param.enum.map((v) => (
+                  <code class="rounded bg-muted px-1 py-0.5 text-[10px]">{v}</code>
+                ))}
+              </div>
+            )}
+          </td>
+          <td class="py-3 pr-4 align-top">
+            <span class={locationBadge({ location: param.in })}>{param.in}</span>
+          </td>
+          <td class="py-3 align-top text-muted-foreground">
+            {param.description && <span set:html={param.description} />}
+            {param.default !== undefined && (
+              <div class="mt-1 text-xs">Default: <code>{param.default}</code></div>
+            )}
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+</div>

package/src/popover/Popover.astro

@@ -0,0 +1,21 @@
+---
+import { tv } from "tailwind-variants";
+
+const popover = tv({
+  base: "relative",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={popover({ class: className })}
+  data-component="popover"
+  {...rest}
+>
+  <slot />
+</div>

package/src/popover/PopoverContent.astro

@@ -0,0 +1,31 @@
+---
+import { tv } from "tailwind-variants";
+
+const popoverContent = tv({
+  base: "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+});
+
+interface Props {
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  class?: string;
+  [key: string]: unknown;
+}
+const {
+  side = "bottom",
+  align = "center",
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class={popoverContent({ class: className })}
+  data-part="content"
+  data-side={side}
+  data-align={align}
+  hidden
+  {...rest}
+>
+  <slot />
+</div>

package/src/popover/PopoverTrigger.astro

@@ -0,0 +1,31 @@
+---
+import { tv } from "tailwind-variants";
+
+const popoverTrigger = 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="trigger" data-as-child>
+      <slot />
+    </span>
+  ) : (
+    <button
+      class={popoverTrigger({ class: className })}
+      data-part="trigger"
+      type="button"
+      {...rest}
+    >
+      <slot />
+    </button>
+  )
+}

package/src/popover/index.ts

@@ -0,0 +1,3 @@
+export { default as Popover } from "./Popover.astro";
+export { default as PopoverTrigger } from "./PopoverTrigger.astro";
+export { default as PopoverContent } from "./PopoverContent.astro";