@dogsbay/ui 0.2.0-beta.0

package/src/radio-group/RadioGroupItem.astro

@@ -0,0 +1,36 @@
+---
+import { tv } from "tailwind-variants";
+
+const radioItem = tv({
+  base: "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+});
+
+interface Props {
+  value: string;
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { value, disabled = false, class: className, ...rest } = Astro.props;
+---
+
+<button
+  class={radioItem({ class: className })}
+  data-part="item"
+  data-value={value}
+  type="button"
+  role="radio"
+  aria-checked="false"
+  disabled={disabled || undefined}
+  aria-disabled={disabled ? "true" : undefined}
+  tabindex="-1"
+  {...rest}
+>
+  <span class="flex items-center justify-center">
+    <span
+      class="hidden h-2.5 w-2.5 rounded-full bg-current"
+      data-part="indicator"
+    ></span>
+  </span>
+</button>

package/src/radio-group/index.ts

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

package/src/radio-group/radio-group.ts

@@ -0,0 +1,126 @@
+function init(root: HTMLElement) {
+  if (root.hasAttribute("data-initialized")) return;
+  root.setAttribute("data-initialized", "");
+
+  const name = root.getAttribute("data-name") || "";
+  const orientation = root.getAttribute("data-orientation") || "vertical";
+  const items = () =>
+    Array.from(
+      root.querySelectorAll<HTMLElement>(
+        "[data-part='item']:not([disabled])",
+      ),
+    );
+
+  // Hidden input for form submission
+  const hiddenInput = document.createElement("input");
+  hiddenInput.type = "hidden";
+  hiddenInput.name = name;
+  root.appendChild(hiddenInput);
+
+  function select(item: HTMLElement) {
+    const value = item.getAttribute("data-value") || "";
+
+    // Deselect all
+    root
+      .querySelectorAll<HTMLElement>("[data-part='item']")
+      .forEach((el) => {
+        el.setAttribute("aria-checked", "false");
+        el.setAttribute("tabindex", "-1");
+        const indicator = el.querySelector<HTMLElement>(
+          "[data-part='indicator']",
+        );
+        if (indicator) indicator.classList.add("hidden");
+      });
+
+    // Select this one
+    item.setAttribute("aria-checked", "true");
+    item.setAttribute("tabindex", "0");
+    const indicator = item.querySelector<HTMLElement>(
+      "[data-part='indicator']",
+    );
+    if (indicator) indicator.classList.remove("hidden");
+
+    hiddenInput.value = value;
+
+    root.dispatchEvent(
+      new CustomEvent("change", { detail: { value }, bubbles: true }),
+    );
+  }
+
+  // Click handler
+  root.addEventListener("click", (e) => {
+    const item = (e.target as HTMLElement).closest<HTMLElement>(
+      "[data-part='item']:not([disabled])",
+    );
+    if (!item) return;
+    select(item);
+    item.focus();
+  });
+
+  // Keyboard navigation
+  root.addEventListener("keydown", (e) => {
+    const item = (e.target as HTMLElement).closest<HTMLElement>(
+      "[data-part='item']",
+    );
+    if (!item) return;
+
+    const enabledItems = items();
+    const currentIndex = enabledItems.indexOf(item);
+    if (currentIndex === -1) return;
+
+    const isVertical = orientation === "vertical";
+    const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
+    const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
+
+    let nextIndex: number | null = null;
+
+    switch (e.key) {
+      case nextKey:
+        nextIndex = (currentIndex + 1) % enabledItems.length;
+        break;
+      case prevKey:
+        nextIndex =
+          (currentIndex - 1 + enabledItems.length) % enabledItems.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = enabledItems.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    e.preventDefault();
+    const next = enabledItems[nextIndex];
+    select(next);
+    next.focus();
+  });
+
+  // Initialize default value
+  const defaultValue = root.getAttribute("data-default-value");
+  if (defaultValue) {
+    const defaultItem = root.querySelector<HTMLElement>(
+      `[data-part='item'][data-value='${defaultValue}']`,
+    );
+    if (defaultItem) select(defaultItem);
+  } else {
+    // First enabled item gets tabindex 0
+    const first = items()[0];
+    if (first) first.setAttribute("tabindex", "0");
+  }
+}
+
+function initAll() {
+  document
+    .querySelectorAll<HTMLElement>("[data-component='radio-group']")
+    .forEach(init);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+document.addEventListener("astro:page-load", initAll);

package/src/response-tabs/ResponseTabs.astro

@@ -0,0 +1,60 @@
+---
+import Tabs from "../tabs/Tabs.astro";
+import TabsList from "../tabs/TabsList.astro";
+import TabsTrigger from "../tabs/TabsTrigger.astro";
+import TabsContent from "../tabs/TabsContent.astro";
+import SchemaViewer from "../schema-viewer/SchemaViewer.astro";
+
+interface SchemaProperty {
+  name: string;
+  type: string;
+  description?: string;
+  required?: boolean;
+  nullable?: boolean;
+  format?: string;
+  enum?: string[];
+  default?: unknown;
+  example?: unknown;
+}
+
+interface ResponseDef {
+  status: string;
+  description?: string;
+  schema?: SchemaProperty[];
+  example?: unknown;
+}
+
+interface Props {
+  responses: ResponseDef[];
+  class?: string;
+}
+
+const { responses, class: className } = Astro.props;
+
+function statusColor(status: string): string {
+  if (status.startsWith("2")) return "bg-api-status-2xx/20 text-api-status-2xx";
+  if (status.startsWith("3")) return "bg-api-status-3xx/20 text-api-status-3xx";
+  if (status.startsWith("4")) return "bg-api-status-4xx/20 text-api-status-4xx";
+  if (status.startsWith("5")) return "bg-api-status-5xx/20 text-api-status-5xx";
+  return "bg-muted/20 text-muted-foreground";
+}
+---
+
+<Tabs defaultValue={responses[0]?.status} class={className}>
+  <TabsList>
+    {responses.map((r) => (
+      <TabsTrigger value={r.status}>
+        <span class:list={["rounded px-1.5 py-0.5 text-xs font-mono font-bold", statusColor(r.status)]}>
+          {r.status}
+        </span>
+      </TabsTrigger>
+    ))}
+  </TabsList>
+
+  {responses.map((r, i) => (
+    <TabsContent value={r.status} default={i === 0}>
+      {r.description && <p class="mb-3 text-sm text-muted-foreground">{r.description}</p>}
+      {r.schema && <SchemaViewer properties={r.schema} />}
+    </TabsContent>
+  ))}
+</Tabs>

package/src/schema-viewer/SchemaViewer.astro

@@ -0,0 +1,42 @@
+---
+/**
+ * JSON Schema property list with nested expand/collapse.
+ * Uses PropertyItem for consistent rendering with PropertyList.
+ */
+import PropertyItem from "../property-item/PropertyItem.astro";
+
+interface SchemaProperty {
+  name: string;
+  type: string;
+  description?: string;
+  required?: boolean;
+  nullable?: boolean;
+  format?: string;
+  enum?: string[];
+  default?: unknown;
+  example?: unknown;
+  properties?: SchemaProperty[];
+  items?: SchemaProperty[];
+}
+
+interface Props {
+  properties: SchemaProperty[];
+  title?: string;
+  class?: string;
+}
+
+const { properties, title, class: className } = Astro.props;
+---
+
+<div class:list={["rounded-lg border bg-card", className]}>
+  {title && (
+    <div class="border-b px-4 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+      {title}
+    </div>
+  )}
+  <div>
+    {properties.map((prop) => (
+      <PropertyItem {...prop} />
+    ))}
+  </div>
+</div>

package/src/scroll-area/ScrollArea.astro

@@ -0,0 +1,44 @@
+---
+import { tv } from "tailwind-variants";
+
+const scrollArea = tv({
+  base: "relative overflow-hidden",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={scrollArea({ class: className })}
+  data-component="scroll-area"
+  {...rest}
+>
+  <div class="h-full w-full overflow-auto scrollbar-none" data-part="viewport" tabindex="0">
+    <slot />
+  </div>
+  <div
+    class="absolute right-0 top-0 h-full w-2.5 touch-none select-none border-l border-l-transparent p-[1px] transition-opacity"
+    data-part="scrollbar"
+    data-orientation="vertical"
+  >
+    <div
+      class="relative w-full rounded-full bg-border"
+      data-part="thumb"
+    ></div>
+  </div>
+  <div
+    class="absolute bottom-0 left-0 h-2.5 w-full touch-none select-none border-t border-t-transparent p-[1px] transition-opacity"
+    data-part="scrollbar"
+    data-orientation="horizontal"
+  >
+    <div
+      class="relative h-full rounded-full bg-border"
+      data-part="thumb"
+    ></div>
+  </div>
+</div>

package/src/scroll-area/index.ts

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

package/src/scroll-area/scroll-area.ts

@@ -0,0 +1,176 @@
+function init(root: HTMLElement) {
+  if (root.hasAttribute("data-initialized")) return;
+  root.setAttribute("data-initialized", "");
+
+  const viewport = root.querySelector<HTMLElement>("[data-part='viewport']");
+  if (!viewport) return;
+
+  const vBar = root.querySelector<HTMLElement>(
+    "[data-part='scrollbar'][data-orientation='vertical']",
+  );
+  const hBar = root.querySelector<HTMLElement>(
+    "[data-part='scrollbar'][data-orientation='horizontal']",
+  );
+  const vThumb = vBar?.querySelector<HTMLElement>("[data-part='thumb']");
+  const hThumb = hBar?.querySelector<HTMLElement>("[data-part='thumb']");
+
+  let hideTimeout: ReturnType<typeof setTimeout>;
+
+  function updateScrollbars() {
+    const {
+      scrollTop,
+      scrollLeft,
+      scrollHeight,
+      scrollWidth,
+      clientHeight,
+      clientWidth,
+    } = viewport!;
+
+    // Vertical
+    if (vBar && vThumb) {
+      const hasOverflow = scrollHeight > clientHeight;
+      vBar.style.opacity = hasOverflow ? "1" : "0";
+      if (hasOverflow) {
+        const ratio = clientHeight / scrollHeight;
+        const thumbHeight = Math.max(ratio * clientHeight, 20);
+        const thumbTop =
+          (scrollTop / (scrollHeight - clientHeight)) *
+          (clientHeight - thumbHeight);
+        vThumb.style.height = `${thumbHeight}px`;
+        vThumb.style.transform = `translateY(${thumbTop}px)`;
+      }
+    }
+
+    // Horizontal
+    if (hBar && hThumb) {
+      const hasOverflow = scrollWidth > clientWidth;
+      hBar.style.opacity = hasOverflow ? "1" : "0";
+      if (hasOverflow) {
+        const ratio = clientWidth / scrollWidth;
+        const thumbWidth = Math.max(ratio * clientWidth, 20);
+        const thumbLeft =
+          (scrollLeft / (scrollWidth - clientWidth)) *
+          (clientWidth - thumbWidth);
+        hThumb.style.width = `${thumbWidth}px`;
+        hThumb.style.transform = `translateX(${thumbLeft}px)`;
+      }
+    }
+
+    // Auto-hide after 1s of inactivity
+    clearTimeout(hideTimeout);
+    if (vBar) vBar.setAttribute("data-state", "visible");
+    if (hBar) hBar.setAttribute("data-state", "visible");
+    hideTimeout = setTimeout(() => {
+      if (vBar) vBar.setAttribute("data-state", "hidden");
+      if (hBar) hBar.setAttribute("data-state", "hidden");
+    }, 1000);
+  }
+
+  // Drag support for vertical thumb
+  if (vBar && vThumb) {
+    setupDrag(vBar, vThumb, viewport, "vertical");
+  }
+
+  // Drag support for horizontal thumb
+  if (hBar && hThumb) {
+    setupDrag(hBar, hThumb, viewport, "horizontal");
+  }
+
+  viewport.addEventListener("scroll", updateScrollbars, { passive: true });
+
+  // Convert vertical wheel to horizontal scroll when only horizontal overflow
+  viewport.addEventListener("wheel", (e) => {
+    const hasHOverflow = viewport.scrollWidth > viewport.clientWidth;
+    const hasVOverflow = viewport.scrollHeight > viewport.clientHeight;
+    if (hasHOverflow && !hasVOverflow && e.deltaY !== 0) {
+      e.preventDefault();
+      viewport.scrollLeft += e.deltaY;
+    }
+  }, { passive: false });
+
+  // Initial update
+  updateScrollbars();
+
+  // Watch for content changes
+  const observer = new ResizeObserver(updateScrollbars);
+  observer.observe(viewport);
+  if (viewport.firstElementChild) {
+    observer.observe(viewport.firstElementChild);
+  }
+}
+
+function setupDrag(
+  bar: HTMLElement,
+  thumb: HTMLElement,
+  viewport: HTMLElement,
+  orientation: "vertical" | "horizontal",
+) {
+  let isDragging = false;
+  let startPos = 0;
+  let startScroll = 0;
+
+  thumb.addEventListener("pointerdown", (e) => {
+    isDragging = true;
+    startPos = orientation === "vertical" ? e.clientY : e.clientX;
+    startScroll =
+      orientation === "vertical" ? viewport.scrollTop : viewport.scrollLeft;
+    thumb.setPointerCapture(e.pointerId);
+    e.preventDefault();
+  });
+
+  thumb.addEventListener("pointermove", (e) => {
+    if (!isDragging) return;
+
+    const pos = orientation === "vertical" ? e.clientY : e.clientX;
+    const delta = pos - startPos;
+
+    const barSize =
+      orientation === "vertical"
+        ? bar.clientHeight
+        : bar.clientWidth;
+    const scrollSize =
+      orientation === "vertical"
+        ? viewport.scrollHeight - viewport.clientHeight
+        : viewport.scrollWidth - viewport.clientWidth;
+
+    const scrollDelta = (delta / barSize) * (scrollSize + barSize);
+
+    if (orientation === "vertical") {
+      viewport.scrollTop = startScroll + scrollDelta;
+    } else {
+      viewport.scrollLeft = startScroll + scrollDelta;
+    }
+  });
+
+  thumb.addEventListener("pointerup", () => {
+    isDragging = false;
+  });
+
+  // Click on track scrolls to position
+  bar.addEventListener("pointerdown", (e) => {
+    if (e.target === thumb) return;
+
+    const rect = bar.getBoundingClientRect();
+    const pos = orientation === "vertical" ? e.clientY - rect.top : e.clientX - rect.left;
+    const ratio = pos / (orientation === "vertical" ? rect.height : rect.width);
+
+    if (orientation === "vertical") {
+      viewport.scrollTop = ratio * (viewport.scrollHeight - viewport.clientHeight);
+    } else {
+      viewport.scrollLeft = ratio * (viewport.scrollWidth - viewport.clientWidth);
+    }
+  });
+}
+
+function initAll() {
+  document
+    .querySelectorAll<HTMLElement>("[data-component='scroll-area']")
+    .forEach(init);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+document.addEventListener("astro:page-load", initAll);

package/src/select/Select.astro

@@ -0,0 +1,34 @@
+---
+import { tv } from "tailwind-variants";
+
+const select = tv({
+  base: "relative",
+});
+
+interface Props {
+  name?: string;
+  defaultValue?: string;
+  required?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  name,
+  defaultValue,
+  required = false,
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class={select({ class: className })}
+  data-component="select"
+  data-name={name}
+  data-default-value={defaultValue}
+  data-required={required || undefined}
+  {...rest}
+>
+  <slot />
+</div>

package/src/select/SelectContent.astro

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

package/src/select/SelectGroup.astro

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

package/src/select/SelectItem.astro

@@ -0,0 +1,28 @@
+---
+import { tv } from "tailwind-variants";
+
+const selectItem = tv({
+  base: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:font-medium aria-disabled:pointer-events-none aria-disabled:opacity-50",
+});
+
+interface Props {
+  value: string;
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { value, disabled = false, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={selectItem({ class: className })}
+  data-part="item"
+  data-value={value}
+  role="option"
+  aria-selected="false"
+  aria-disabled={disabled ? "true" : undefined}
+  {...rest}
+>
+  <slot />
+</div>

package/src/select/SelectLabel.astro

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

package/src/select/SelectSeparator.astro

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

package/src/select/SelectTrigger.astro

@@ -0,0 +1,28 @@
+---
+import { tv } from "tailwind-variants";
+
+const selectTrigger = tv({
+  base: "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<!-- aria-controls is set by the select controller at runtime -->
+<button
+  class={selectTrigger({ class: className })}
+  data-part="trigger"
+  type="button"
+  role="combobox"
+  aria-haspopup="listbox"
+  aria-expanded="false"
+  aria-controls=""
+  {...rest}
+>
+  <slot />
+</button>

package/src/select/SelectValue.astro

@@ -0,0 +1,18 @@
+---
+interface Props {
+  placeholder?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { placeholder = "Select...", class: className, ...rest } = Astro.props;
+---
+
+<span
+  class:list={["base-select-value", className]}
+  data-part="value"
+  data-placeholder={placeholder}
+  {...rest}
+>
+  {placeholder}
+</span>