@dogsbay/ui 0.2.0-beta.0

package/src/math/MathKatex.astro

@@ -0,0 +1,35 @@
+---
+/**
+ * MathKatex — renders LaTeX math at build time using KaTeX.
+ * Zero client JS. Includes MathML for accessibility.
+ */
+import katex from "katex";
+
+interface Props {
+  /** LaTeX math string */
+  latex: string;
+  /** Display mode (block) vs inline */
+  display?: boolean;
+  class?: string;
+}
+
+const { latex, display = false, class: className } = Astro.props;
+
+let html: string;
+try {
+  html = katex.renderToString(latex, {
+    displayMode: display,
+    throwOnError: false,
+    output: "htmlAndMathml",
+  });
+} catch {
+  // Fallback: render as code
+  html = `<code class="text-destructive">${latex}</code>`;
+}
+---
+
+{display ? (
+  <div class:list={["my-4 overflow-x-auto", className]} set:html={html} />
+) : (
+  <span class={className} set:html={html} />
+)}

package/src/math/index.ts

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

package/src/menubar/Menubar.astro

@@ -0,0 +1,25 @@
+---
+import { tv } from "tailwind-variants";
+
+const menubar = tv({
+  base: "flex h-10 items-center gap-1 rounded-md border bg-background p-1",
+});
+
+interface Props {
+  openOnHover?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { openOnHover = true, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={menubar({ class: className })}
+  data-component="menubar"
+  data-open-on-hover={openOnHover ? "true" : "false"}
+  role="menubar"
+  {...rest}
+>
+  <slot />
+</div>

package/src/menubar/MenubarContent.astro

@@ -0,0 +1,24 @@
+---
+import { tv } from "tailwind-variants";
+
+const menubarContent = tv({
+  base: "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={menubarContent({ class: className })}
+  data-part="content"
+  role="menu"
+  hidden
+  {...rest}
+>
+  <slot />
+</div>

package/src/menubar/MenubarItem.astro

@@ -0,0 +1,26 @@
+---
+import { tv } from "tailwind-variants";
+
+const menubarItem = 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",
+});
+
+interface Props {
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { disabled = false, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={menubarItem({ class: className })}
+  data-part="item"
+  role="menuitem"
+  tabindex="-1"
+  data-disabled={disabled ? "true" : undefined}
+  {...rest}
+>
+  <slot />
+</div>

package/src/menubar/MenubarMenu.astro

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

package/src/menubar/MenubarSeparator.astro

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

package/src/menubar/MenubarShortcut.astro

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

package/src/menubar/MenubarTrigger.astro

@@ -0,0 +1,27 @@
+---
+import { tv } from "tailwind-variants";
+
+const menubarTrigger = tv({
+  base: "inline-flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<button
+  class={menubarTrigger({ class: className })}
+  data-part="trigger"
+  type="button"
+  role="menuitem"
+  aria-haspopup="menu"
+  aria-expanded="false"
+  tabindex="-1"
+  {...rest}
+>
+  <slot />
+</button>

package/src/menubar/index.ts

@@ -0,0 +1,7 @@
+export { default as Menubar } from "./Menubar.astro";
+export { default as MenubarMenu } from "./MenubarMenu.astro";
+export { default as MenubarTrigger } from "./MenubarTrigger.astro";
+export { default as MenubarContent } from "./MenubarContent.astro";
+export { default as MenubarItem } from "./MenubarItem.astro";
+export { default as MenubarSeparator } from "./MenubarSeparator.astro";
+export { default as MenubarShortcut } from "./MenubarShortcut.astro";

package/src/menubar/menubar.ts

@@ -0,0 +1,258 @@
+import { DismissController } from "@dogsbay/primitives/dismiss";
+import { setupFloating } from "@dogsbay/primitives/floating";
+
+interface MenubarInstance {
+  root: HTMLElement;
+  menus: MenuInstance[];
+  activeIndex: number;
+}
+
+interface MenuInstance {
+  menu: HTMLElement;
+  trigger: HTMLElement;
+  content: HTMLElement;
+  items: HTMLElement[];
+  dismiss: DismissController;
+  cleanupFloating: (() => void) | null;
+  open: boolean;
+  highlightedIndex: number;
+}
+
+const instances = new WeakMap<HTMLElement, MenubarInstance>();
+
+function init(root: HTMLElement) {
+  if (root.hasAttribute("data-initialized")) return;
+  root.setAttribute("data-initialized", "");
+
+  const openOnHover = root.getAttribute("data-open-on-hover") !== "false";
+  const menuEls = Array.from(root.querySelectorAll<HTMLElement>("[data-part='menu']"));
+  const menus: MenuInstance[] = [];
+
+  menuEls.forEach((menuEl) => {
+    const trigger = menuEl.querySelector<HTMLElement>("[data-part='trigger']");
+    const content = menuEl.querySelector<HTMLElement>("[data-part='content']");
+    if (!trigger || !content) return;
+
+    const items = Array.from(content.querySelectorAll<HTMLElement>("[data-part='item']"));
+    items.forEach((item, i) => {
+      item.setAttribute("tabindex", "-1");
+    });
+
+    const menuInstance: MenuInstance = {
+      menu: menuEl,
+      trigger,
+      content,
+      items,
+      dismiss: new DismissController(content, {
+        onDismiss: () => closeMenu(instance, menus.indexOf(menuInstance)),
+      }),
+      cleanupFloating: null,
+      open: false,
+      highlightedIndex: -1,
+    };
+
+    menus.push(menuInstance);
+
+    // Track if dismiss just closed to prevent reopen on same click
+    let dismissedAt = 0;
+
+    const originalDismiss = menuInstance.dismiss;
+    menuInstance.dismiss = new DismissController(content, {
+      onDismiss: () => {
+        dismissedAt = Date.now();
+        closeMenu(instance, menus.indexOf(menuInstance));
+      },
+    });
+
+    // Click to open/close
+    trigger.addEventListener("click", () => {
+      const idx = menus.indexOf(menuInstance);
+      // Skip if dismiss just closed this menu (within 100ms = same click)
+      if (Date.now() - dismissedAt < 100) return;
+      if (menuInstance.open) {
+        closeMenu(instance, idx);
+      } else {
+        openMenu(instance, idx);
+      }
+    });
+
+    // Hover to switch when another menu is open (only if openOnHover)
+    if (openOnHover) {
+      trigger.addEventListener("pointerenter", () => {
+        if (instance.activeIndex >= 0 && !menuInstance.open) {
+          openMenu(instance, menus.indexOf(menuInstance));
+        }
+      });
+    }
+
+    // Item keyboard nav
+    content.addEventListener("keydown", (e) => {
+      if (!menuInstance.open) return;
+      const idx = menus.indexOf(menuInstance);
+      const enabled = items.filter((i) => i.getAttribute("data-disabled") !== "true");
+
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const cur = menuInstance.highlightedIndex >= 0 ? enabled.indexOf(items[menuInstance.highlightedIndex]) : -1;
+          const next = cur < enabled.length - 1 ? cur + 1 : 0;
+          highlightItem(menuInstance, items.indexOf(enabled[next]));
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const cur2 = menuInstance.highlightedIndex >= 0 ? enabled.indexOf(items[menuInstance.highlightedIndex]) : -1;
+          const prev = cur2 > 0 ? cur2 - 1 : enabled.length - 1;
+          highlightItem(menuInstance, items.indexOf(enabled[prev]));
+          break;
+        }
+        case "ArrowRight": {
+          e.preventDefault();
+          const nextMenu = (idx + 1) % menus.length;
+          openMenu(instance, nextMenu);
+          break;
+        }
+        case "ArrowLeft": {
+          e.preventDefault();
+          const prevMenu = (idx - 1 + menus.length) % menus.length;
+          openMenu(instance, prevMenu);
+          break;
+        }
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (menuInstance.highlightedIndex >= 0) items[menuInstance.highlightedIndex].click();
+          closeMenu(instance, idx);
+          break;
+        case "Escape":
+          e.preventDefault();
+          closeMenu(instance, idx);
+          menus[idx].trigger.focus();
+          break;
+      }
+    });
+
+    // Item click closes
+    items.forEach((item) => {
+      item.addEventListener("click", () => {
+        if (item.getAttribute("data-disabled") === "true") return;
+        closeMenu(instance, menus.indexOf(menuInstance));
+      });
+      item.addEventListener("pointerenter", () => {
+        if (item.getAttribute("data-disabled") === "true") return;
+        highlightItem(menuInstance, items.indexOf(item));
+      });
+      item.addEventListener("pointerleave", () => {
+        clearHighlight(menuInstance);
+      });
+    });
+  });
+
+  const instance: MenubarInstance = { root, menus, activeIndex: -1 };
+  instances.set(root, instance);
+
+  // First trigger gets tabindex 0
+  if (menus.length > 0) menus[0].trigger.setAttribute("tabindex", "0");
+
+  // Menubar-level keyboard (ArrowLeft/Right between triggers)
+  root.addEventListener("keydown", (e) => {
+    const triggerEl = (e.target as HTMLElement).closest<HTMLElement>("[data-part='trigger']");
+    if (!triggerEl) return;
+    const idx = menus.findIndex((m) => m.trigger === triggerEl);
+    if (idx === -1) return;
+
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      const next = (idx + 1) % menus.length;
+      menus[idx].trigger.setAttribute("tabindex", "-1");
+      menus[next].trigger.setAttribute("tabindex", "0");
+      menus[next].trigger.focus();
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      const prev = (idx - 1 + menus.length) % menus.length;
+      menus[idx].trigger.setAttribute("tabindex", "-1");
+      menus[prev].trigger.setAttribute("tabindex", "0");
+      menus[prev].trigger.focus();
+    } else if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      openMenu(instance, idx);
+    }
+  });
+}
+
+function openMenu(instance: MenubarInstance, idx: number) {
+  // Close any open menu
+  if (instance.activeIndex >= 0 && instance.activeIndex !== idx) {
+    closeMenu(instance, instance.activeIndex);
+  }
+
+  const menu = instance.menus[idx];
+  if (menu.open) return;
+  menu.open = true;
+  instance.activeIndex = idx;
+
+  menu.content.hidden = false;
+  menu.content.setAttribute("data-state", "open");
+  menu.trigger.setAttribute("data-state", "open");
+  menu.trigger.setAttribute("aria-expanded", "true");
+
+  menu.cleanupFloating = setupFloating(menu.trigger, menu.content, {
+    placement: "bottom-start",
+    offset: 4,
+  });
+
+  // Focus first enabled item
+  const enabled = menu.items.filter((i) => i.getAttribute("data-disabled") !== "true");
+  if (enabled.length > 0) highlightItem(menu, menu.items.indexOf(enabled[0]));
+
+  menu.dismiss.activate();
+}
+
+function closeMenu(instance: MenubarInstance, idx: number) {
+  const menu = instance.menus[idx];
+  if (!menu.open) return;
+  menu.open = false;
+  if (instance.activeIndex === idx) instance.activeIndex = -1;
+
+  menu.dismiss.deactivate();
+  menu.content.setAttribute("data-state", "closed");
+  menu.content.hidden = true;
+  menu.trigger.setAttribute("data-state", "closed");
+  menu.trigger.setAttribute("aria-expanded", "false");
+  clearHighlight(menu);
+
+  if (menu.cleanupFloating) {
+    menu.cleanupFloating();
+    menu.cleanupFloating = null;
+  }
+}
+
+function highlightItem(menu: MenuInstance, index: number) {
+  if (index < 0 || index >= menu.items.length) return;
+  clearHighlight(menu);
+  menu.highlightedIndex = index;
+  const item = menu.items[index];
+  item.setAttribute("data-highlighted", "");
+  item.setAttribute("tabindex", "0");
+  item.focus();
+}
+
+function clearHighlight(menu: MenuInstance) {
+  if (menu.highlightedIndex >= 0) {
+    const prev = menu.items[menu.highlightedIndex];
+    prev.removeAttribute("data-highlighted");
+    prev.setAttribute("tabindex", "-1");
+  }
+  menu.highlightedIndex = -1;
+}
+
+function initAll() {
+  document.querySelectorAll<HTMLElement>("[data-component='menubar']").forEach(init);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+document.addEventListener("astro:page-load", initAll);

package/src/meter/Meter.astro

@@ -0,0 +1,75 @@
+---
+import { tv } from "tailwind-variants";
+
+const meter = tv({
+  base: "relative w-full",
+});
+
+const meterTrack = tv({
+  base: "h-2 w-full overflow-hidden rounded-full bg-secondary",
+});
+
+const meterBar = tv({
+  base: "h-full rounded-full transition-all",
+});
+
+interface Props {
+  value: number;
+  min?: number;
+  max?: number;
+  low?: number;
+  high?: number;
+  optimum?: number;
+  label?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  value,
+  min = 0,
+  max = 100,
+  low,
+  high,
+  optimum,
+  label,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const pct = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
+
+// Determine segment: is value in low/optimal/high range?
+function getSegment(): "low" | "optimal" | "high" {
+  if (low !== undefined && value < low) return "low";
+  if (high !== undefined && value > high) return "high";
+  return "optimal";
+}
+
+const segment = getSegment();
+const colorMap = {
+  low: "bg-destructive",
+  optimal: "bg-primary",
+  high: "bg-warning",
+};
+---
+
+<div
+  class={meter({ class: className })}
+  data-component="meter"
+  role="meter"
+  aria-valuenow={value}
+  aria-valuemin={min}
+  aria-valuemax={max}
+  aria-label={label}
+  data-segment={segment}
+  {...rest}
+>
+  <div class={meterTrack()}>
+    <div
+      class={`${meterBar()} ${colorMap[segment]}`}
+      data-part="bar"
+      style={`width: ${pct}%`}
+    ></div>
+  </div>
+</div>

package/src/meter/index.ts

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

package/src/method-badge/MethodBadge.astro

@@ -0,0 +1,32 @@
+---
+import { tv, type VariantProps } from "tailwind-variants";
+
+const methodBadge = tv({
+  base: "inline-flex items-center rounded-md px-2 py-0.5 text-xs font-bold uppercase tracking-wide font-mono",
+  variants: {
+    method: {
+      get: "bg-api-get/20 text-api-get",
+      post: "bg-api-post/20 text-api-post",
+      put: "bg-api-put/20 text-api-put",
+      patch: "bg-api-patch/20 text-api-patch",
+      delete: "bg-api-delete/20 text-api-delete",
+      head: "bg-api-head/20 text-api-head",
+      options: "bg-muted/20 text-muted-foreground",
+    },
+  },
+});
+
+type MethodVariants = VariantProps<typeof methodBadge>;
+
+interface Props {
+  method: NonNullable<MethodVariants["method"]>;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { method, class: className, ...rest } = Astro.props;
+---
+
+<span class={methodBadge({ method, class: className })} data-method={method} {...rest}>
+  {method}
+</span>

package/src/navigation-menu/NavigationMenu.astro

@@ -0,0 +1,24 @@
+---
+import { tv } from "tailwind-variants";
+
+const navigationMenu = tv({
+  base: "relative",
+});
+
+interface Props {
+  openOnHover?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { openOnHover = true, class: className, ...rest } = Astro.props;
+---
+
+<nav
+  class={navigationMenu({ class: className })}
+  data-component="navigation-menu"
+  data-open-on-hover={openOnHover ? "true" : "false"}
+  {...rest}
+>
+  <slot />
+</nav>

package/src/navigation-menu/NavigationMenuContent.astro

@@ -0,0 +1,24 @@
+---
+import { tv } from "tailwind-variants";
+
+const navigationMenuContent = tv({
+  base: "absolute top-full left-0 z-50 mt-1.5 w-auto min-w-[12rem] rounded-md border bg-popover p-4 text-popover-foreground shadow-md",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={navigationMenuContent({ class: className })}
+  data-part="content"
+  data-state="closed"
+  hidden
+  {...rest}
+>
+  <slot />
+</div>

package/src/navigation-menu/NavigationMenuItem.astro

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

package/src/navigation-menu/NavigationMenuLink.astro

@@ -0,0 +1,26 @@
+---
+import { tv } from "tailwind-variants";
+
+const navigationMenuLink = tv({
+  base: "inline-flex items-center 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 data-[active]:bg-accent/50 data-[active]:text-accent-foreground",
+});
+
+interface Props {
+  class?: string;
+  href?: string;
+  active?: boolean;
+  [key: string]: unknown;
+}
+
+const { class: className, href, active = false, ...rest } = Astro.props;
+---
+
+<a
+  class={navigationMenuLink({ class: className })}
+  data-part="link"
+  href={href}
+  data-active={active || undefined}
+  {...rest}
+>
+  <slot />
+</a>

package/src/navigation-menu/NavigationMenuList.astro

@@ -0,0 +1,22 @@
+---
+import { tv } from "tailwind-variants";
+
+const navigationMenuList = tv({
+  base: "flex items-center gap-1",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<ul
+  class={navigationMenuList({ class: className })}
+  data-part="list"
+  {...rest}
+>
+  <slot />
+</ul>