@dogsbay/ui 0.2.0-beta.0

package/src/toc/TableOfContents.astro

@@ -0,0 +1,225 @@
+---
+import { tv } from "tailwind-variants";
+
+const tocNav = tv({
+  base: "text-sm",
+  variants: {
+    sticky: {
+      true: "sticky top-4 max-h-[calc(100vh-2rem)] overflow-y-auto",
+    },
+  },
+  defaultVariants: {
+    sticky: true,
+  },
+});
+
+const tocTitle = tv({
+  base: "mb-3 text-sm font-medium text-foreground",
+});
+
+interface TocItem {
+  depth: number;
+  slug: string;
+  text: string;
+  /** Symbol kind for API reference entries (class, meth, attr, func, module) */
+  kind?: string;
+}
+
+interface Props {
+  /** Array of heading items to display */
+  headings: TocItem[];
+  /** Minimum heading level to include (default: 2) */
+  minLevel?: number;
+  /** Maximum heading level to include (default: 3) */
+  maxLevel?: number;
+  /** Title text (default: "On this page") */
+  title?: string;
+  /** Stick to viewport while scrolling (default: true) */
+  sticky?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  headings,
+  minLevel = 2,
+  maxLevel = 3,
+  title = "On this page",
+  sticky = true,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const filtered = headings.filter(
+  (h) => h.depth >= minLevel && h.depth <= maxLevel,
+);
+---
+
+{filtered.length > 0 && (
+  <nav
+    class={tocNav({ sticky, class: className })}
+    data-component="toc"
+    aria-label={title}
+    {...rest}
+  >
+    <h2 class={tocTitle()}>{title}</h2>
+    <ul class="space-y-1">
+      {filtered.map((heading) => (
+        <li
+          style={`padding-left: ${(heading.depth - minLevel) * 0.75}rem`}
+        >
+          <a
+            href={`#${heading.slug}`}
+            class="block py-1 text-muted-foreground transition-colors hover:text-foreground data-[active]:font-medium data-[active]:text-foreground"
+            data-toc-link
+            data-toc-slug={heading.slug}
+          >
+            {heading.kind && (
+              <span class={`toc-kind toc-kind-${heading.kind}`}>{heading.kind}</span>
+            )}
+            {heading.text}
+          </a>
+        </li>
+      ))}
+    </ul>
+  </nav>
+)}
+
+<style>
+  .toc-kind {
+    display: inline-block;
+    border-radius: 0.25rem;
+    padding: 0 0.3rem;
+    font-size: 0.6rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: lowercase;
+    vertical-align: middle;
+    margin-right: 0.35rem;
+    line-height: 1.4;
+  }
+  .toc-kind-class {
+    background-color: oklch(0.55 0.18 265 / 0.15);
+    color: oklch(0.55 0.18 265);
+  }
+  :global(.dark) .toc-kind-class {
+    background-color: oklch(0.7 0.15 265 / 0.2);
+    color: oklch(0.7 0.15 265);
+  }
+  .toc-kind-meth {
+    background-color: oklch(0.55 0.15 155 / 0.15);
+    color: oklch(0.55 0.15 155);
+  }
+  :global(.dark) .toc-kind-meth {
+    background-color: oklch(0.7 0.15 155 / 0.2);
+    color: oklch(0.7 0.15 155);
+  }
+  .toc-kind-attr {
+    background-color: oklch(0.6 0.15 55 / 0.15);
+    color: oklch(0.6 0.15 55);
+  }
+  :global(.dark) .toc-kind-attr {
+    background-color: oklch(0.75 0.15 55 / 0.2);
+    color: oklch(0.75 0.15 55);
+  }
+  .toc-kind-func {
+    background-color: oklch(0.55 0.18 330 / 0.15);
+    color: oklch(0.55 0.18 330);
+  }
+  :global(.dark) .toc-kind-func {
+    background-color: oklch(0.7 0.15 330 / 0.2);
+    color: oklch(0.7 0.15 330);
+  }
+  .toc-kind-module {
+    background-color: oklch(0.5 0.12 200 / 0.15);
+    color: oklch(0.5 0.12 200);
+  }
+  :global(.dark) .toc-kind-module {
+    background-color: oklch(0.65 0.12 200 / 0.2);
+    color: oklch(0.65 0.12 200);
+  }
+</style>
+
+<script>
+  function setupToc() {
+    const tocNav = document.querySelector("[data-component='toc']");
+    if (!tocNav) return;
+
+    const links = Array.from(
+      tocNav.querySelectorAll<HTMLAnchorElement>("[data-toc-link]"),
+    );
+    if (links.length === 0) return;
+
+    // Collect heading elements matching TOC links
+    const headings = links
+      .map((link) => {
+        const slug = link.getAttribute("data-toc-slug");
+        return slug ? document.getElementById(slug) : null;
+      })
+      .filter(Boolean) as HTMLElement[];
+
+    if (headings.length === 0) return;
+
+    let activeSlug: string | null = null;
+
+    function setActive(slug: string | null) {
+      if (slug === activeSlug) return;
+      activeSlug = slug;
+      links.forEach((link) => {
+        if (link.getAttribute("data-toc-slug") === slug) {
+          link.setAttribute("data-active", "");
+        } else {
+          link.removeAttribute("data-active");
+        }
+      });
+    }
+
+    // Use IntersectionObserver to track which heading is in view
+    const observer = new IntersectionObserver(
+      (entries) => {
+        // Find the first heading that is intersecting (visible)
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActive(entry.target.id);
+            return;
+          }
+        }
+
+        // If none are intersecting, find the last heading above the viewport
+        const scrollY = window.scrollY;
+        let closest: HTMLElement | null = null;
+        for (const heading of headings) {
+          if (heading.offsetTop <= scrollY + 100) {
+            closest = heading;
+          }
+        }
+        if (closest) {
+          setActive(closest.id);
+        }
+      },
+      {
+        rootMargin: "-80px 0px -80% 0px",
+        threshold: 0,
+      },
+    );
+
+    headings.forEach((heading) => observer.observe(heading));
+
+    // Set initial active
+    const scrollY = window.scrollY;
+    let initial: HTMLElement | null = null;
+    for (const heading of headings) {
+      if (heading.offsetTop <= scrollY + 100) {
+        initial = heading;
+      }
+    }
+    if (initial) {
+      setActive(initial.id);
+    } else if (headings[0]) {
+      setActive(headings[0].id);
+    }
+  }
+
+  setupToc();
+  document.addEventListener("astro:after-swap", setupToc);
+</script>

package/src/toggle/Toggle.astro

@@ -0,0 +1,56 @@
+---
+import { tv, type VariantProps } from "tailwind-variants";
+
+const toggle = tv({
+  base: "inline-flex cursor-pointer items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      outline: "border border-input bg-transparent",
+    },
+    size: {
+      default: "h-10 w-10",
+      sm: "h-9 w-9",
+      lg: "h-11 w-11",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+type ToggleVariants = VariantProps<typeof toggle>;
+
+interface Props {
+  defaultPressed?: boolean;
+  disabled?: boolean;
+  variant?: ToggleVariants["variant"];
+  size?: ToggleVariants["size"];
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  defaultPressed = false,
+  disabled = false,
+  variant = "default",
+  size = "default",
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<button
+  class={toggle({ variant, size, class: className })}
+  data-component="toggle"
+  type="button"
+  aria-pressed={String(defaultPressed)}
+  disabled={disabled || undefined}
+  data-state={defaultPressed ? "on" : "off"}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  <slot />
+</button>

package/src/toggle/index.ts

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

package/src/toggle/toggle.ts

@@ -0,0 +1,38 @@
+const instances = new WeakSet<HTMLElement>();
+
+function initToggle(root: HTMLElement) {
+  if (instances.has(root)) return;
+  instances.add(root);
+
+  root.addEventListener("click", () => {
+    if (root.hasAttribute("disabled")) return;
+
+    const pressed = root.getAttribute("aria-pressed") === "true";
+    const next = !pressed;
+
+    root.setAttribute("aria-pressed", String(next));
+    root.setAttribute("data-state", next ? "on" : "off");
+
+    root.dispatchEvent(
+      new CustomEvent("base-toggle:change", {
+        detail: { pressed: next },
+        bubbles: true,
+      }),
+    );
+  });
+}
+
+function init() {
+  document.querySelectorAll("[data-component='toggle']").forEach((el) => {
+    initToggle(el as HTMLElement);
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+document.addEventListener("astro:page-load", init);
+
+export { initToggle };

package/src/toggle-group/ToggleGroup.astro

@@ -0,0 +1,39 @@
+---
+import { tv } from "tailwind-variants";
+
+const toggleGroup = tv({
+  base: "inline-flex items-center justify-center gap-1 rounded-md",
+});
+
+interface Props {
+  type?: "single" | "multiple";
+  defaultValue?: string | string[];
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  type = "single",
+  defaultValue,
+  disabled = false,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const defaultStr = Array.isArray(defaultValue)
+  ? defaultValue.join(",")
+  : defaultValue || "";
+---
+
+<div
+  class={toggleGroup({ class: className })}
+  data-component="toggle-group"
+  data-type={type}
+  data-default-value={defaultStr}
+  data-disabled={disabled || undefined}
+  role="group"
+  {...rest}
+>
+  <slot />
+</div>

package/src/toggle-group/ToggleGroupItem.astro

@@ -0,0 +1,56 @@
+---
+import { tv, type VariantProps } from "tailwind-variants";
+
+const toggleGroupItem = tv({
+  base: "inline-flex cursor-pointer items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      outline: "border border-input bg-transparent",
+    },
+    size: {
+      default: "h-10 w-10",
+      sm: "h-9 w-9",
+      lg: "h-11 w-11",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+type Variants = VariantProps<typeof toggleGroupItem>;
+
+interface Props {
+  value: string;
+  disabled?: boolean;
+  variant?: Variants["variant"];
+  size?: Variants["size"];
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  value,
+  disabled = false,
+  variant = "default",
+  size = "default",
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<button
+  class={toggleGroupItem({ variant, size, class: className })}
+  data-part="item"
+  data-value={value}
+  type="button"
+  aria-pressed="false"
+  data-state="off"
+  disabled={disabled || undefined}
+  tabindex="-1"
+  {...rest}
+>
+  <slot />
+</button>

package/src/toggle-group/index.ts

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

package/src/toggle-group/toggle-group.ts

@@ -0,0 +1,121 @@
+function init(root: HTMLElement) {
+  if (root.hasAttribute("data-initialized")) return;
+  root.setAttribute("data-initialized", "");
+
+  const type = root.getAttribute("data-type") || "single";
+  const disabled = root.hasAttribute("data-disabled");
+
+  const items = () =>
+    Array.from(root.querySelectorAll<HTMLElement>("[data-part='item']:not([disabled])"));
+
+  function setPressed(item: HTMLElement, pressed: boolean) {
+    item.setAttribute("aria-pressed", String(pressed));
+    item.setAttribute("data-state", pressed ? "on" : "off");
+  }
+
+  function getPressed(): Set<string> {
+    const result = new Set<string>();
+    root.querySelectorAll<HTMLElement>("[data-part='item']").forEach((el) => {
+      if (el.getAttribute("aria-pressed") === "true") {
+        result.add(el.getAttribute("data-value") || "");
+      }
+    });
+    return result;
+  }
+
+  function select(item: HTMLElement) {
+    const value = item.getAttribute("data-value") || "";
+    const isPressed = item.getAttribute("aria-pressed") === "true";
+
+    if (type === "single") {
+      // Deselect all, select this (or deselect if already selected)
+      root.querySelectorAll<HTMLElement>("[data-part='item']").forEach((el) =>
+        setPressed(el, false),
+      );
+      if (!isPressed) setPressed(item, true);
+    } else {
+      // Toggle this item
+      setPressed(item, !isPressed);
+    }
+
+    root.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: type === "single" ? (getPressed().values().next().value ?? "") : [...getPressed()] },
+        bubbles: true,
+      }),
+    );
+  }
+
+  // Click
+  root.addEventListener("click", (e) => {
+    if (disabled) return;
+    const item = (e.target as HTMLElement).closest<HTMLElement>(
+      "[data-part='item']:not([disabled])",
+    );
+    if (!item) return;
+    select(item);
+  });
+
+  // Keyboard
+  root.addEventListener("keydown", (e) => {
+    const item = (e.target as HTMLElement).closest<HTMLElement>("[data-part='item']");
+    if (!item) return;
+
+    const enabled = items();
+    const idx = enabled.indexOf(item);
+    if (idx === -1) return;
+
+    let next: number | null = null;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        next = (idx + 1) % enabled.length;
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        next = (idx - 1 + enabled.length) % enabled.length;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = enabled.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    e.preventDefault();
+    enabled[next].focus();
+    enabled[next].setAttribute("tabindex", "0");
+    item.setAttribute("tabindex", "-1");
+  });
+
+  // Initialize defaults
+  const defaultValue = root.getAttribute("data-default-value") || "";
+  const defaults = defaultValue ? defaultValue.split(",") : [];
+
+  root.querySelectorAll<HTMLElement>("[data-part='item']").forEach((el) => {
+    const val = el.getAttribute("data-value") || "";
+    if (defaults.includes(val)) setPressed(el, true);
+    if (disabled) {
+      el.setAttribute("disabled", "");
+      el.setAttribute("aria-disabled", "true");
+    }
+  });
+
+  // First enabled item gets tabindex 0
+  const first = items()[0];
+  if (first) first.setAttribute("tabindex", "0");
+}
+
+function initAll() {
+  document.querySelectorAll<HTMLElement>("[data-component='toggle-group']").forEach(init);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+document.addEventListener("astro:page-load", initAll);

package/src/toolbar/Toolbar.astro

@@ -0,0 +1,26 @@
+---
+import { tv } from "tailwind-variants";
+
+const toolbar = tv({
+  base: "flex items-center gap-1 rounded-md border bg-background p-1",
+});
+
+interface Props {
+  orientation?: "horizontal" | "vertical";
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { orientation = "horizontal", class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={toolbar({ class: className })}
+  data-component="toolbar"
+  data-orientation={orientation}
+  role="toolbar"
+  aria-orientation={orientation}
+  {...rest}
+>
+  <slot />
+</div>

package/src/toolbar/ToolbarButton.astro

@@ -0,0 +1,29 @@
+---
+import { tv } from "tailwind-variants";
+
+const toolbarButton = tv({
+  base: "inline-flex h-9 w-9 items-center justify-center rounded-md 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 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+});
+
+interface Props {
+  pressed?: boolean;
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { pressed, disabled = false, class: className, ...rest } = Astro.props;
+---
+
+<button
+  class={toolbarButton({ class: className })}
+  data-part="button"
+  type="button"
+  tabindex="-1"
+  disabled={disabled || undefined}
+  aria-pressed={pressed !== undefined ? String(pressed) : undefined}
+  data-state={pressed ? "on" : undefined}
+  {...rest}
+>
+  <slot />
+</button>

package/src/toolbar/ToolbarSeparator.astro

@@ -0,0 +1,14 @@
+---
+import { tv } from "tailwind-variants";
+
+const sep = tv({ base: "mx-1 h-6 w-px bg-border" });
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={sep({ class: className })} role="separator" aria-orientation="vertical" {...rest}></div>

package/src/toolbar/index.ts

@@ -0,0 +1,3 @@
+export { default as Toolbar } from "./Toolbar.astro";
+export { default as ToolbarButton } from "./ToolbarButton.astro";
+export { default as ToolbarSeparator } from "./ToolbarSeparator.astro";

package/src/toolbar/toolbar.ts

@@ -0,0 +1,65 @@
+function init(root: HTMLElement) {
+  if (root.hasAttribute("data-initialized")) return;
+  root.setAttribute("data-initialized", "");
+
+  const orientation = root.getAttribute("data-orientation") || "horizontal";
+
+  const items = () =>
+    Array.from(
+      root.querySelectorAll<HTMLElement>(
+        "[data-part='button']:not([disabled])",
+      ),
+    );
+
+  // First item gets tabindex 0
+  const first = items()[0];
+  if (first) first.setAttribute("tabindex", "0");
+
+  root.addEventListener("keydown", (e) => {
+    const target = (e.target as HTMLElement).closest<HTMLElement>(
+      "[data-part='button']",
+    );
+    if (!target) return;
+
+    const enabled = items();
+    const idx = enabled.indexOf(target);
+    if (idx === -1) return;
+
+    const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+    const prevKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+
+    let next: number | null = null;
+    switch (e.key) {
+      case nextKey:
+        next = (idx + 1) % enabled.length;
+        break;
+      case prevKey:
+        next = (idx - 1 + enabled.length) % enabled.length;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = enabled.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    e.preventDefault();
+    target.setAttribute("tabindex", "-1");
+    enabled[next].setAttribute("tabindex", "0");
+    enabled[next].focus();
+  });
+}
+
+function initAll() {
+  document.querySelectorAll<HTMLElement>("[data-component='toolbar']").forEach(init);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+document.addEventListener("astro:page-load", initAll);