@dogsbay/ui 0.2.0-beta.0

package/src/sidebar/SidebarNavTree.astro

@@ -0,0 +1,106 @@
+---
+/**
+ * Recursive sidebar navigation tree.
+ * Renders a data-driven tree with native <details>/<summary> for zero-JS expand/collapse.
+ * Left-side chevrons, consistent indentation per level, active page highlighting.
+ *
+ * Usage:
+ *   <SidebarNavTree items={navItems} currentPath={Astro.url.pathname} />
+ */
+
+interface NavItem {
+  label: string;
+  href?: string;
+  icon?: string;         // Raw SVG string (rendered via set:html)
+  children?: NavItem[];
+}
+
+interface Props {
+  items: NavItem[];
+  currentPath: string;
+  level?: number;
+  class?: string;
+}
+
+const { items, currentPath, level = 0, class: className } = Astro.props;
+
+const normalizedPath = currentPath.replace(/\/$/, "") || "/";
+
+function isActive(href: string) {
+  return normalizedPath === href;
+}
+
+function hasActiveDescendant(item: NavItem): boolean {
+  if (item.href && isActive(item.href)) return true;
+  if (item.children) return item.children.some(hasActiveDescendant);
+  return false;
+}
+
+// Indentation: 8px base + 12px per level
+const paddingLeft = `${8 + level * 12}px`;
+---
+
+<ul
+  class:list={[
+    "flex min-w-0 flex-col",
+    level === 0 && "w-full",
+    level === 0 && "group-data-[collapsible=icon]:hidden",
+    className,
+  ]}
+  data-sidebar="nav-tree"
+  data-level={level}
+>
+  {items.map((item) => {
+    const active = item.href ? isActive(item.href) : false;
+    const hasChildren = item.children && item.children.length > 0;
+    const shouldOpen = hasChildren && hasActiveDescendant(item);
+
+    return (
+      <li data-sidebar="nav-tree-item">
+        {hasChildren ? (
+          <details open={shouldOpen || active}>
+            <summary
+              class:list={[
+                "flex w-full min-w-0 cursor-pointer items-center gap-2 rounded-md text-sm text-sidebar-foreground outline-none [list-style:none] ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&::-webkit-details-marker]:hidden",
+                level === 0 ? "h-8" : "h-7",
+                active && "bg-sidebar-accent font-medium text-sidebar-accent-foreground",
+              ]}
+              style={`padding-left: ${paddingLeft};`}
+              data-nav-href={item.href || undefined}
+              data-active={active || undefined}
+            >
+              <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" class="size-4 shrink-0 transition-transform duration-200" data-chevron aria-hidden="true"><polyline points="9 18 15 12 9 6" /></svg>
+              {item.icon && <span class="shrink-0 [&>svg]:size-4" set:html={item.icon} />}
+              <span class="truncate">{item.label}</span>
+            </summary>
+            <Astro.self items={item.children!} currentPath={currentPath} level={level + 1} />
+          </details>
+        ) : (
+          <a
+            href={item.href || "#"}
+            class:list={[
+              "flex w-full min-w-0 items-center gap-2 rounded-md text-sm text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2",
+              level === 0 ? "h-8" : "h-7",
+              active && "bg-sidebar-accent font-medium text-sidebar-accent-foreground",
+            ]}
+            style={`padding-left: ${paddingLeft};`}
+            data-active={active || undefined}
+            data-nav-href={item.href}
+          >
+            {/* Spacer to align with chevron in branch items */}
+            <span class="size-4 shrink-0" />
+            {/* Icon (level 0 only) */}
+            {item.icon && <span class="shrink-0 [&>svg]:size-4" set:html={item.icon} />}
+            <span class="truncate">{item.label}</span>
+          </a>
+        )}
+      </li>
+    );
+  })}
+</ul>
+
+<style is:global>
+  details[open] > summary [data-chevron] {
+    transform: rotate(90deg);
+  }
+</style>

package/src/sidebar/SidebarProvider.astro

@@ -0,0 +1,23 @@
+---
+import { tv } from "tailwind-variants";
+
+const sidebarProvider = tv({
+  base: "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={sidebarProvider({ class: className })}
+  data-component="sidebar-provider"
+  style="--sidebar-width: 16rem; --sidebar-width-icon: 3rem;"
+  {...rest}
+>
+  <slot />
+</div>

package/src/sidebar/SidebarRail.astro

@@ -0,0 +1,25 @@
+---
+import { tv } from "tailwind-variants";
+
+const sidebarRail = tv({
+  base: "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<button
+  class={sidebarRail({ class: className })}
+  data-part="rail"
+  aria-label="Toggle Sidebar"
+  tabindex={-1}
+  title="Toggle Sidebar"
+  type="button"
+  {...rest}
+>
+</button>

package/src/sidebar/SidebarSeparator.astro

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

package/src/sidebar/SidebarTrigger.astro

@@ -0,0 +1,40 @@
+---
+import { tv } from "tailwind-variants";
+
+const sidebarTrigger = tv({
+  base: "inline-flex h-7 w-7 items-center justify-center rounded-md text-sm hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<button
+  class={sidebarTrigger({ class: className })}
+  data-part="sidebar-trigger"
+  type="button"
+  {...rest}
+>
+  <slot>
+    <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"
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2"></rect>
+      <path d="M9 3v18"></path>
+    </svg>
+  </slot>
+  <span class="sr-only">Toggle Sidebar</span>
+</button>

package/src/sidebar/index.ts

@@ -0,0 +1,19 @@
+export { default as SidebarProvider } from "./SidebarProvider.astro";
+export { default as Sidebar } from "./Sidebar.astro";
+export { default as SidebarHeader } from "./SidebarHeader.astro";
+export { default as SidebarContent } from "./SidebarContent.astro";
+export { default as SidebarFooter } from "./SidebarFooter.astro";
+export { default as SidebarTrigger } from "./SidebarTrigger.astro";
+export { default as SidebarInset } from "./SidebarInset.astro";
+export { default as SidebarRail } from "./SidebarRail.astro";
+export { default as SidebarGroup } from "./SidebarGroup.astro";
+export { default as SidebarGroupLabel } from "./SidebarGroupLabel.astro";
+export { default as SidebarGroupContent } from "./SidebarGroupContent.astro";
+export { default as SidebarMenu } from "./SidebarMenu.astro";
+export { default as SidebarMenuItem } from "./SidebarMenuItem.astro";
+export { default as SidebarMenuButton } from "./SidebarMenuButton.astro";
+export { default as SidebarMenuSub } from "./SidebarMenuSub.astro";
+export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.astro";
+export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.astro";
+export { default as SidebarSeparator } from "./SidebarSeparator.astro";
+export { default as SidebarMenuBadge } from "./SidebarMenuBadge.astro";

package/src/sidebar/sidebar.ts

@@ -0,0 +1,265 @@
+import { ScrollLock } from "@dogsbay/primitives/scroll-lock";
+
+const SIDEBAR_STORAGE_KEY = "sidebar_state";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const MOBILE_BREAKPOINT = 768;
+
+interface SidebarInstance {
+  provider: HTMLElement;
+  sidebar: HTMLElement;
+  desktopSidebar: HTMLElement | null;
+  mobileSidebar: HTMLElement | null;
+  mobileBackdrop: HTMLElement | null;
+  collapsible: "offcanvas" | "icon" | "none";
+  side: "left" | "right";
+  open: boolean;
+  openMobile: boolean;
+  isMobile: boolean;
+  mediaQuery: MediaQueryList;
+}
+
+const instances = new WeakMap<HTMLElement, SidebarInstance>();
+
+function getStoredState(key: string): string | null {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+function setStoredState(key: string, value: string) {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+    // localStorage unavailable (private browsing, etc.)
+  }
+}
+
+function initSidebar(provider: HTMLElement) {
+  if (instances.has(provider)) return;
+
+  const sidebar = provider.querySelector(
+    "[data-component='sidebar']",
+  ) as HTMLElement | null;
+  if (!sidebar) return;
+
+  const collapsible =
+    (sidebar.dataset.collapsible as SidebarInstance["collapsible"]) ||
+    "offcanvas";
+  const side = (sidebar.dataset.side as "left" | "right") || "left";
+  const defaultOpen = sidebar.dataset.defaultOpen !== "false";
+
+  // Read persisted state from localStorage
+  const storedState = getStoredState(SIDEBAR_STORAGE_KEY);
+  const initialOpen =
+    storedState !== null ? storedState === "true" : defaultOpen;
+
+  // Find desktop and mobile sidebar containers
+  const desktopSidebar = sidebar.querySelector(
+    "[data-sidebar-desktop]",
+  ) as HTMLElement | null;
+  const mobileSidebar = sidebar.querySelector(
+    "[data-sidebar-mobile]",
+  ) as HTMLElement | null;
+  const mobileBackdrop = sidebar.querySelector(
+    "[data-sidebar-mobile-backdrop]",
+  ) as HTMLElement | null;
+
+  const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+
+  const instance: SidebarInstance = {
+    provider,
+    sidebar,
+    desktopSidebar,
+    mobileSidebar,
+    mobileBackdrop,
+    collapsible,
+    side,
+    open: initialOpen,
+    openMobile: false,
+    isMobile: mediaQuery.matches,
+    mediaQuery,
+  };
+
+  instances.set(provider, instance);
+
+  // Set initial state
+  updateDesktopState(instance);
+
+  // Responsive listener
+  const handleMediaChange = (e: MediaQueryListEvent | MediaQueryList) => {
+    instance.isMobile = e.matches;
+    if (!e.matches && instance.openMobile) {
+      // Switched to desktop while mobile sidebar was open — close it
+      closeMobile(provider);
+    }
+  };
+  mediaQuery.addEventListener("change", handleMediaChange);
+
+  // Keyboard: Cmd+B / Ctrl+B toggle, Escape closes mobile
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (
+      e.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+      (e.metaKey || e.ctrlKey)
+    ) {
+      e.preventDefault();
+      toggleSidebar(provider);
+    } else if (e.key === "Escape" && instance.openMobile) {
+      e.preventDefault();
+      closeMobile(provider);
+    }
+  };
+  document.addEventListener("keydown", handleKeyDown);
+
+  // Bind triggers
+  bindTriggers(provider, instance);
+
+  // Bind mobile backdrop click
+  if (mobileBackdrop) {
+    mobileBackdrop.addEventListener("click", () => {
+      closeMobile(provider);
+    });
+  }
+
+  // Bind rail
+  const rail = sidebar.querySelector("[data-part='rail']") as HTMLElement | null;
+  if (rail) {
+    rail.addEventListener("click", () => {
+      toggleSidebar(provider);
+    });
+  }
+}
+
+function bindTriggers(provider: HTMLElement, instance: SidebarInstance) {
+  // Find all triggers within the provider (or globally if using data-sidebar-for)
+  provider.querySelectorAll("[data-part='sidebar-trigger']").forEach((el) => {
+    el.addEventListener("click", () => {
+      toggleSidebar(provider);
+    });
+  });
+}
+
+function toggleSidebar(provider: HTMLElement) {
+  const instance = instances.get(provider);
+  if (!instance) return;
+
+  if (instance.isMobile) {
+    if (instance.openMobile) {
+      closeMobile(provider);
+    } else {
+      openMobile(provider);
+    }
+  } else {
+    instance.open = !instance.open;
+    updateDesktopState(instance);
+    setStoredState(SIDEBAR_STORAGE_KEY, String(instance.open));
+  }
+}
+
+function updateDesktopState(instance: SidebarInstance) {
+  const state = instance.open ? "expanded" : "collapsed";
+  instance.provider.setAttribute("data-state", state);
+  instance.sidebar.setAttribute("data-state", state);
+
+  if (instance.desktopSidebar) {
+    instance.desktopSidebar.setAttribute("data-state", state);
+
+    // Set data-collapsible only when collapsed
+    if (!instance.open) {
+      instance.desktopSidebar.setAttribute(
+        "data-collapsible",
+        instance.collapsible,
+      );
+    } else {
+      instance.desktopSidebar.setAttribute("data-collapsible", "");
+    }
+  }
+}
+
+function openMobile(provider: HTMLElement) {
+  const instance = instances.get(provider);
+  if (!instance || instance.openMobile || !instance.mobileSidebar) return;
+
+  instance.openMobile = true;
+
+  // Move sidebar inner content to mobile shell
+  const sidebarInner = instance.desktopSidebar?.querySelector(
+    "[data-sidebar='sidebar-inner']",
+  ) as HTMLElement | null;
+  if (sidebarInner) {
+    // Move all children to mobile shell
+    while (sidebarInner.firstChild) {
+      instance.mobileSidebar.appendChild(sidebarInner.firstChild);
+    }
+  }
+
+  instance.mobileSidebar.hidden = false;
+  instance.mobileSidebar.setAttribute("data-state", "open");
+
+  if (instance.mobileBackdrop) {
+    instance.mobileBackdrop.hidden = false;
+  }
+
+  // Lock scroll
+  ScrollLock.lock();
+
+  // Focus first focusable element in sidebar
+  requestAnimationFrame(() => {
+    const focusable = instance.mobileSidebar?.querySelector(
+      'a, button, [tabindex]:not([tabindex="-1"])',
+    ) as HTMLElement | null;
+    focusable?.focus();
+  });
+}
+
+function closeMobile(provider: HTMLElement) {
+  const instance = instances.get(provider);
+  if (!instance || !instance.openMobile || !instance.mobileSidebar) return;
+
+  instance.openMobile = false;
+
+  // Move content back to desktop inner
+  const sidebarInner = instance.desktopSidebar?.querySelector(
+    "[data-sidebar='sidebar-inner']",
+  ) as HTMLElement | null;
+  if (sidebarInner && instance.mobileSidebar) {
+    while (instance.mobileSidebar.firstChild) {
+      sidebarInner.appendChild(instance.mobileSidebar.firstChild);
+    }
+  }
+
+  instance.mobileSidebar.setAttribute("data-state", "closed");
+  instance.mobileSidebar.hidden = true;
+
+  if (instance.mobileBackdrop) {
+    instance.mobileBackdrop.hidden = true;
+  }
+
+  // Unlock scroll
+  ScrollLock.unlock();
+
+  // Return focus to trigger
+  const trigger = instance.provider.querySelector(
+    "[data-part='sidebar-trigger']",
+  ) as HTMLElement | null;
+  trigger?.focus();
+}
+
+// Auto-initialize
+function init() {
+  document
+    .querySelectorAll("[data-component='sidebar-provider']")
+    .forEach((el) => {
+      initSidebar(el as HTMLElement);
+    });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+document.addEventListener("astro:page-load", init);
+
+export { initSidebar, toggleSidebar, openMobile, closeMobile };

package/src/skeleton/Skeleton.astro

@@ -0,0 +1,16 @@
+---
+import { tv } from "tailwind-variants";
+
+const skeleton = tv({
+  base: "animate-pulse rounded-md bg-muted",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={skeleton({ class: className })} aria-hidden="true" {...rest}>
+</div>

package/src/skeleton/index.ts

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

package/src/skip-link/SkipLink.astro

@@ -0,0 +1,24 @@
+---
+import { tv } from "tailwind-variants";
+
+const skipLink = tv({
+  base: "sr-only focus:not-sr-only fixed left-4 top-4 z-[100] rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground shadow-md ring-2 ring-ring focus:outline-none",
+});
+
+interface Props {
+  /** Target element ID (without #). Defaults to "content" */
+  target?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { target = "content", class: className, ...rest } = Astro.props;
+---
+
+<a
+  href={`#${target}`}
+  class={skipLink({ class: className })}
+  {...rest}
+>
+  Skip to content
+</a>

package/src/slider/Slider.astro

@@ -0,0 +1,61 @@
+---
+import { tv } from "tailwind-variants";
+
+const slider = tv({
+  base: "relative flex w-full touch-none select-none items-center",
+});
+
+interface Props {
+  name?: string;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  name,
+  defaultValue = 50,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const pct = ((defaultValue - min) / (max - min)) * 100;
+---
+
+<div
+  class={slider({ class: className })}
+  data-component="slider"
+  data-min={min}
+  data-max={max}
+  data-step={step}
+  data-name={name}
+  data-disabled={disabled || undefined}
+  {...rest}
+>
+  <div class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary" data-part="track">
+    <div class="absolute h-full bg-primary" data-part="range" style={`width: ${pct}%`}></div>
+  </div>
+  <button
+    class="absolute block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background 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-part="thumb"
+    type="button"
+    role="slider"
+    aria-valuenow={defaultValue}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-label={name || "Value"}
+    aria-orientation="horizontal"
+    disabled={disabled || undefined}
+    tabindex={disabled ? -1 : 0}
+    style={`left: calc(${pct}% - 10px)`}
+  ></button>
+  {name && <input type="hidden" name={name} value={String(defaultValue)} data-part="hidden-input" />}
+</div>

package/src/slider/index.ts

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