@dogsbay/ui 0.2.0-beta.0

package/src/table/TableRow.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const tableRow = tv({
+  base: "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<tr class={tableRow({ class: className })} {...rest}>
+  <slot />
+</tr>

package/src/table/index.ts

@@ -0,0 +1,8 @@
+export { default as Table } from "./Table.astro";
+export { default as TableHeader } from "./TableHeader.astro";
+export { default as TableBody } from "./TableBody.astro";
+export { default as TableFooter } from "./TableFooter.astro";
+export { default as TableRow } from "./TableRow.astro";
+export { default as TableHead } from "./TableHead.astro";
+export { default as TableCell } from "./TableCell.astro";
+export { default as TableCaption } from "./TableCaption.astro";

package/src/tabs/Tabs.astro

@@ -0,0 +1,37 @@
+---
+import { tv } from "tailwind-variants";
+
+const tabs = tv({
+  base: "w-full my-4 border border-border rounded-lg overflow-hidden",
+});
+
+interface Props {
+  defaultValue?: string;
+  orientation?: "horizontal" | "vertical";
+  syncKey?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  defaultValue,
+  orientation = "horizontal",
+  syncKey,
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<db-tabs
+  class={tabs({ class: className })}
+  default-value={defaultValue}
+  orientation={orientation}
+  sync-key={syncKey}
+  {...rest}
+>
+  <slot />
+</db-tabs>
+
+<script>
+  import "@dogsbay/elements/db-tabs";
+</script>

package/src/tabs/TabsContent.astro

@@ -0,0 +1,32 @@
+---
+import { tv } from "tailwind-variants";
+
+const tabsContent = tv({
+  base: "px-4 py-3 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&>:first-child]:mt-0 [&>:last-child]:mb-0",
+});
+
+interface Props {
+  value: string;
+  default?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  value,
+  default: isDefault = false,
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class={tabsContent({ class: className })}
+  data-part="content"
+  data-value={value}
+  role="tabpanel"
+  hidden={!isDefault}
+  {...rest}
+>
+  <slot />
+</div>

package/src/tabs/TabsList.astro

@@ -0,0 +1,23 @@
+---
+import { tv } from "tailwind-variants";
+
+const tabsList = tv({
+  base: "flex items-center bg-muted p-1 text-muted-foreground border-b border-border",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={tabsList({ class: className })}
+  data-part="list"
+  role="tablist"
+  {...rest}
+>
+  <slot />
+</div>

package/src/tabs/TabsTrigger.astro

@@ -0,0 +1,29 @@
+---
+import { tv } from "tailwind-variants";
+
+const tabsTrigger = tv({
+  base: "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-selected:bg-background aria-selected:text-foreground aria-selected:shadow-sm",
+});
+
+interface Props {
+  value: string;
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { value, disabled = false, class: className, ...rest } = Astro.props;
+---
+
+<button
+  class={tabsTrigger({ class: className })}
+  data-part="trigger"
+  data-value={value}
+  role="tab"
+  type="button"
+  disabled={disabled || undefined}
+  aria-disabled={disabled ? "true" : undefined}
+  {...rest}
+>
+  <slot />
+</button>

package/src/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from "./Tabs.astro";
+export { default as TabsList } from "./TabsList.astro";
+export { default as TabsTrigger } from "./TabsTrigger.astro";
+export { default as TabsContent } from "./TabsContent.astro";

package/src/tabs/tabs.ts

@@ -0,0 +1,220 @@
+import { CompositeNavigation } from "@dogsbay/primitives/composite";
+import type { Orientation } from "@dogsbay/primitives/composite";
+
+interface TabsInstance {
+  root: HTMLElement;
+  list: HTMLElement;
+  triggers: HTMLElement[];
+  panels: HTMLElement[];
+  nav: CompositeNavigation;
+  value: string;
+  syncKey: string | null;
+  orientation: Orientation;
+}
+
+const instances = new WeakMap<HTMLElement, TabsInstance>();
+
+let idCounter = 0;
+function uniqueId(prefix: string) {
+  return `${prefix}-${++idCounter}`;
+}
+
+function initTabs(root: HTMLElement) {
+  if (instances.has(root)) return;
+
+  const list = root.querySelector("[data-part='list']") as HTMLElement | null;
+  if (!list) return;
+
+  const triggers = Array.from(
+    list.querySelectorAll("[data-part='trigger']"),
+  ) as HTMLElement[];
+  const panels = Array.from(
+    root.querySelectorAll("[data-part='content']"),
+  ) as HTMLElement[];
+
+  const orientation = (root.dataset.orientation as Orientation) || "horizontal";
+  const defaultValue =
+    root.dataset.defaultValue || triggers[0]?.dataset.value || "";
+  const syncKey = root.dataset.syncKey || null;
+
+  // Set orientation on tablist
+  list.setAttribute("aria-orientation", orientation);
+
+  // Generate IDs and link triggers ↔ panels
+  triggers.forEach((trigger) => {
+    const value = trigger.dataset.value!;
+    const triggerId = trigger.id || uniqueId("base-tab");
+    trigger.id = triggerId;
+
+    const panel = panels.find((p) => p.dataset.value === value);
+    if (panel) {
+      const panelId = panel.id || uniqueId("base-tabpanel");
+      panel.id = panelId;
+      trigger.setAttribute("aria-controls", panelId);
+      panel.setAttribute("aria-labelledby", triggerId);
+    }
+  });
+
+  // Set up composite navigation
+  const nav = new CompositeNavigation(list, "[data-part='trigger']", {
+    orientation,
+    loop: true,
+    homeEnd: true,
+    onHighlightedIndexChange: () => {
+      // Selection follows focus — activate the focused tab
+      const focused = document.activeElement as HTMLElement;
+      const value = focused?.dataset?.value;
+      if (value) selectTab(root, value);
+    },
+  });
+
+  const instance: TabsInstance = {
+    root,
+    list,
+    triggers,
+    panels,
+    nav,
+    value: "",
+    syncKey,
+    orientation,
+  };
+
+  instances.set(root, instance);
+
+  // Click handler — also handles non-keyboard activation
+  list.addEventListener("click", (e) => {
+    const trigger = (e.target as HTMLElement).closest(
+      "[data-part='trigger']",
+    ) as HTMLElement | null;
+    if (!trigger || trigger.hasAttribute("disabled")) return;
+    const value = trigger.dataset.value;
+    if (value) selectTab(root, value);
+  });
+
+  // Activate navigation
+  nav.activate();
+
+  // Sync: read initial value from localStorage or hash
+  let initialValue = defaultValue;
+  if (syncKey) {
+    const stored = localStorage.getItem(`base-tabs-sync:${syncKey}`);
+    if (stored && triggers.some((t) => t.dataset.value === stored)) {
+      initialValue = stored;
+    }
+  }
+
+  // Deep link: check URL hash
+  const hash = window.location.hash.slice(1);
+  if (hash && triggers.some((t) => t.dataset.value === hash)) {
+    initialValue = hash;
+  }
+
+  // Set initial selection
+  selectTab(root, initialValue);
+
+  // Listen for sync events from other tabs instances with same syncKey
+  if (syncKey) {
+    window.addEventListener("storage", (e) => {
+      if (e.key !== `base-tabs-sync:${syncKey}`) return;
+      const newValue = e.newValue;
+      if (newValue && instance.value !== newValue) {
+        selectTab(root, newValue);
+      }
+    });
+
+    // Listen for same-page sync (custom event)
+    document.addEventListener(`base-tabs-sync:${syncKey}`, ((
+      e: CustomEvent,
+    ) => {
+      const newValue = e.detail.value;
+      if (newValue && instance.value !== newValue) {
+        selectTab(root, newValue);
+      }
+    }) as EventListener);
+  }
+}
+
+function selectTab(root: HTMLElement, value: string) {
+  const instance = instances.get(root);
+  if (!instance) return;
+  if (instance.value === value) return;
+
+  instance.value = value;
+
+  // Update triggers
+  instance.triggers.forEach((trigger) => {
+    const isSelected = trigger.dataset.value === value;
+    trigger.setAttribute("aria-selected", String(isSelected));
+    trigger.setAttribute("tabindex", isSelected ? "0" : "-1");
+    if (isSelected) {
+      trigger.setAttribute("data-state", "active");
+    } else {
+      trigger.removeAttribute("data-state");
+    }
+  });
+
+  // Update panels
+  instance.panels.forEach((panel) => {
+    const isActive = panel.dataset.value === value;
+    panel.hidden = !isActive;
+    if (isActive) {
+      panel.setAttribute("data-state", "active");
+      // Ensure panel is focusable for keyboard users
+      if (!panel.hasAttribute("tabindex")) {
+        panel.setAttribute("tabindex", "0");
+      }
+      // Lazy init: initialize any nested tabs that haven't been set up yet
+      panel.querySelectorAll("[data-component='tabs']").forEach((nestedEl) => {
+        if (!instances.has(nestedEl as HTMLElement)) {
+          initTabs(nestedEl as HTMLElement);
+        }
+      });
+    } else {
+      panel.removeAttribute("data-state");
+    }
+  });
+
+  // Update hash
+  if (window.location.hash.slice(1) !== value) {
+    // Only update hash if the user interacted (not on initial load)
+    // We skip this to avoid scroll jumps on page load
+  }
+
+  // Sync to localStorage and other instances
+  if (instance.syncKey) {
+    localStorage.setItem(`base-tabs-sync:${instance.syncKey}`, value);
+    document.dispatchEvent(
+      new CustomEvent(`base-tabs-sync:${instance.syncKey}`, {
+        detail: { value, source: root },
+      }),
+    );
+  }
+
+  // Dispatch change event
+  root.dispatchEvent(
+    new CustomEvent("base-tabs:change", {
+      detail: { value },
+      bubbles: true,
+    }),
+  );
+}
+
+// Auto-initialize — skip tabs inside hidden panels (they'll be lazy-inited)
+function init() {
+  document.querySelectorAll("[data-component='tabs']").forEach((el) => {
+    const tabsEl = el as HTMLElement;
+    // Skip if inside a hidden tabpanel (will be lazy-inited when panel activates)
+    const parentPanel = tabsEl.closest("[data-part='content'][hidden]");
+    if (parentPanel) return;
+    initTabs(tabsEl);
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+document.addEventListener("astro:page-load", init);
+
+export { initTabs, selectTab };

package/src/textarea/Textarea.astro

@@ -0,0 +1,25 @@
+---
+import { tv } from "tailwind-variants";
+
+const textarea = tv({
+  base: "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 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",
+  variants: {
+    invalid: {
+      true: "border-destructive focus-visible:ring-destructive",
+    },
+  },
+});
+
+interface Props {
+  invalid?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+const { invalid = false, class: className, ...rest } = Astro.props;
+---
+
+<textarea
+  class={textarea({ invalid: invalid || undefined, class: className })}
+  aria-invalid={invalid ? "true" : undefined}
+  data-invalid={invalid || undefined}
+  {...rest}></textarea>

package/src/textarea/index.ts

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

package/src/theme-toggle/ThemeToggle.astro

@@ -0,0 +1,67 @@
+---
+import { tv } from "tailwind-variants";
+
+const themeToggle = tv({
+  base: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors 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={themeToggle({ class: className })}
+  data-component="theme-toggle"
+  type="button"
+  aria-label="Toggle dark mode"
+  {...rest}
+>
+  <svg
+    class="dark:hidden h-4 w-4"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="2"
+    stroke="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M21.752 15.002A9.72 9.72 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+    ></path>
+  </svg>
+  <svg
+    class="hidden dark:block h-4 w-4"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="2"
+    stroke="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+    ></path>
+  </svg>
+</button>
+
+<script>
+  function setupThemeToggles() {
+    document.querySelectorAll("[data-component='theme-toggle']").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const isDark = document.documentElement.classList.toggle("dark");
+        localStorage.setItem("theme", isDark ? "dark" : "light");
+      });
+    });
+  }
+
+  setupThemeToggles();
+  document.addEventListener("astro:after-swap", setupThemeToggles);
+</script>

package/src/theme-toggle/index.ts

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

package/src/toast/Toaster.astro

@@ -0,0 +1,39 @@
+---
+import { tv } from "tailwind-variants";
+
+const toaster = tv({
+  base: "fixed z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:flex-col",
+  variants: {
+    position: {
+      "top-right": "top-0 right-0 sm:max-w-[420px]",
+      "top-left": "top-0 left-0 sm:max-w-[420px]",
+      "bottom-right": "bottom-0 right-0 sm:max-w-[420px]",
+      "bottom-left": "bottom-0 left-0 sm:max-w-[420px]",
+      "top-center": "top-0 left-1/2 -translate-x-1/2 sm:max-w-[420px]",
+      "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 sm:max-w-[420px]",
+    },
+  },
+  defaultVariants: {
+    position: "bottom-right",
+  },
+});
+
+interface Props {
+  position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { position = "bottom-right", class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={toaster({ position, class: className })}
+  data-component="toaster"
+  data-position={position}
+  role="region"
+  aria-label="Notifications"
+  aria-live="polite"
+  {...rest}
+>
+</div>

package/src/toast/index.ts

@@ -0,0 +1,3 @@
+export { default as Toaster } from "./Toaster.astro";
+export { toast } from "./toast.ts";
+export type { ToastOptions } from "./toast.ts";

package/src/toast/toast.ts

@@ -0,0 +1,104 @@
+export interface ToastOptions {
+  title: string;
+  description?: string;
+  variant?: "default" | "destructive";
+  duration?: number;
+  action?: { label: string; onClick: () => void };
+}
+
+let toastId = 0;
+
+const variantClasses = {
+  default:
+    "border bg-background text-foreground",
+  destructive:
+    "border-destructive bg-destructive text-destructive-foreground",
+};
+
+function getToaster(): HTMLElement | null {
+  return document.querySelector("[data-component='toaster']");
+}
+
+function createToastElement(options: ToastOptions): HTMLElement {
+  const id = `toast-${++toastId}`;
+  const variant = options.variant ?? "default";
+
+  const el = document.createElement("div");
+  el.id = id;
+  el.setAttribute("role", "status");
+  el.setAttribute("aria-live", "polite");
+  el.setAttribute("aria-atomic", "true");
+  el.setAttribute("data-part", "toast");
+  el.setAttribute("data-state", "open");
+  el.setAttribute("data-variant", variant);
+  el.className = `group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-md p-4 shadow-lg transition-all data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-full data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-right-full ${variantClasses[variant]}`;
+
+  const content = document.createElement("div");
+  content.className = "grid gap-1";
+
+  const title = document.createElement("div");
+  title.className = "text-sm font-semibold";
+  title.textContent = options.title;
+  content.appendChild(title);
+
+  if (options.description) {
+    const desc = document.createElement("div");
+    desc.className = "text-sm opacity-90";
+    desc.textContent = options.description;
+    content.appendChild(desc);
+  }
+
+  el.appendChild(content);
+
+  // Action button
+  if (options.action) {
+    const actionBtn = document.createElement("button");
+    actionBtn.className =
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2";
+    actionBtn.textContent = options.action.label;
+    actionBtn.addEventListener("click", () => {
+      options.action!.onClick();
+      dismiss(el);
+    });
+    el.appendChild(actionBtn);
+  }
+
+  // Close button
+  const closeBtn = document.createElement("button");
+  closeBtn.className =
+    "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100";
+  closeBtn.setAttribute("aria-label", "Close");
+  closeBtn.innerHTML =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
+  closeBtn.addEventListener("click", () => dismiss(el));
+  el.appendChild(closeBtn);
+
+  return el;
+}
+
+function dismiss(el: HTMLElement) {
+  el.setAttribute("data-state", "closed");
+  setTimeout(() => el.remove(), 200);
+}
+
+export function toast(options: ToastOptions) {
+  const toaster = getToaster();
+  if (!toaster) {
+    console.warn("No <Toaster> found in the DOM.");
+    return;
+  }
+
+  const el = createToastElement(options);
+  toaster.appendChild(el);
+
+  // Auto-dismiss
+  const duration = options.duration ?? 5000;
+  if (duration > 0) {
+    setTimeout(() => {
+      if (el.parentElement) dismiss(el);
+    }, duration);
+  }
+}
+
+// Expose globally for demo page scripts
+(window as unknown as Record<string, unknown>).__toast = toast;