@dogsbay/ui 0.2.0-beta.0

package/src/tooltip/Tooltip.astro

@@ -0,0 +1,21 @@
+---
+import { tv } from "tailwind-variants";
+
+const tooltip = tv({
+  base: "relative inline-block",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={tooltip({ class: className })}
+  data-component="tooltip"
+  {...rest}
+>
+  <slot />
+</div>

package/src/tooltip/TooltipContent.astro

@@ -0,0 +1,25 @@
+---
+import { tv } from "tailwind-variants";
+
+const tooltipContent = tv({
+  base: "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
+});
+
+interface Props {
+  side?: "top" | "bottom" | "left" | "right";
+  class?: string;
+  [key: string]: unknown;
+}
+const { side = "top", class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={tooltipContent({ class: className })}
+  data-part="content"
+  data-side={side}
+  role="tooltip"
+  hidden
+  {...rest}
+>
+  <slot />
+</div>

package/src/tooltip/TooltipTrigger.astro

@@ -0,0 +1,31 @@
+---
+import { tv } from "tailwind-variants";
+
+const tooltipTrigger = tv({
+  base: "inline-flex items-center justify-center",
+});
+
+interface Props {
+  asChild?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+const { asChild = false, class: className, ...rest } = Astro.props;
+---
+
+{
+  asChild ? (
+    <span data-part="trigger" data-as-child>
+      <slot />
+    </span>
+  ) : (
+    <button
+      class={tooltipTrigger({ class: className })}
+      data-part="trigger"
+      type="button"
+      {...rest}
+    >
+      <slot />
+    </button>
+  )
+}

package/src/tooltip/index.ts

@@ -0,0 +1,3 @@
+export { default as Tooltip } from "./Tooltip.astro";
+export { default as TooltipTrigger } from "./TooltipTrigger.astro";
+export { default as TooltipContent } from "./TooltipContent.astro";

package/src/tooltip/tooltip.ts

@@ -0,0 +1,156 @@
+import { setupFloating } from "@dogsbay/primitives/floating";
+import type { Placement } from "@floating-ui/dom";
+
+interface TooltipInstance {
+  root: HTMLElement;
+  trigger: HTMLElement;
+  content: HTMLElement;
+  cleanupFloating: (() => void) | null;
+  open: boolean;
+  showTimeout: ReturnType<typeof setTimeout> | null;
+  hideTimeout: ReturnType<typeof setTimeout> | null;
+}
+
+const instances = new WeakMap<HTMLElement, TooltipInstance>();
+
+let idCounter = 0;
+function uniqueId(prefix: string) {
+  return `${prefix}-${++idCounter}`;
+}
+
+const SHOW_DELAY = 200;
+const HIDE_DELAY = 0;
+
+function resolveAsChild(wrapper: HTMLElement): HTMLElement {
+  const child = wrapper.firstElementChild as HTMLElement | null;
+  if (child) {
+    const part = wrapper.getAttribute("data-part");
+    if (part) child.setAttribute("data-part", part);
+    return child;
+  }
+  return wrapper;
+}
+
+function initTooltip(root: HTMLElement) {
+  if (instances.has(root)) return;
+
+  const triggerWrapper = root.querySelector(
+    "[data-part='trigger']",
+  ) as HTMLElement | null;
+  const content = root.querySelector(
+    "[data-part='content']",
+  ) as HTMLElement | null;
+  if (!triggerWrapper || !content) return;
+
+  let trigger = triggerWrapper;
+  if (triggerWrapper.hasAttribute("data-as-child")) {
+    trigger = resolveAsChild(triggerWrapper);
+  }
+
+  const contentId = content.id || uniqueId("base-tooltip");
+  content.id = contentId;
+  trigger.setAttribute("aria-describedby", contentId);
+
+  const instance: TooltipInstance = {
+    root,
+    trigger,
+    content,
+    cleanupFloating: null,
+    open: false,
+    showTimeout: null,
+    hideTimeout: null,
+  };
+
+  instances.set(root, instance);
+
+  // Mouse events
+  trigger.addEventListener("mouseenter", () => scheduleShow(root));
+  trigger.addEventListener("mouseleave", () => scheduleHide(root));
+
+  // Focus events (keyboard accessibility)
+  trigger.addEventListener("focus", () => showTooltip(root));
+  trigger.addEventListener("blur", () => hideTooltip(root));
+
+  // Escape closes
+  trigger.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && instance.open) {
+      hideTooltip(root);
+    }
+  });
+}
+
+function scheduleShow(root: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance) return;
+
+  clearTimeouts(instance);
+  instance.showTimeout = setTimeout(() => showTooltip(root), SHOW_DELAY);
+}
+
+function scheduleHide(root: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance) return;
+
+  clearTimeouts(instance);
+  instance.hideTimeout = setTimeout(() => hideTooltip(root), HIDE_DELAY);
+}
+
+function clearTimeouts(instance: TooltipInstance) {
+  if (instance.showTimeout) {
+    clearTimeout(instance.showTimeout);
+    instance.showTimeout = null;
+  }
+  if (instance.hideTimeout) {
+    clearTimeout(instance.hideTimeout);
+    instance.hideTimeout = null;
+  }
+}
+
+function showTooltip(root: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance || instance.open) return;
+  instance.open = true;
+
+  clearTimeouts(instance);
+
+  instance.content.hidden = false;
+  instance.content.setAttribute("data-state", "open");
+
+  const side = (instance.content.dataset.side || "top") as Placement;
+
+  instance.cleanupFloating = setupFloating(instance.trigger, instance.content, {
+    placement: side,
+    offset: 8,
+  });
+}
+
+function hideTooltip(root: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance || !instance.open) return;
+  instance.open = false;
+
+  clearTimeouts(instance);
+
+  instance.content.setAttribute("data-state", "closed");
+  instance.content.hidden = true;
+
+  if (instance.cleanupFloating) {
+    instance.cleanupFloating();
+    instance.cleanupFloating = null;
+  }
+}
+
+function init() {
+  document.querySelectorAll("[data-component='tooltip']").forEach((el) => {
+    initTooltip(el as HTMLElement);
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+document.addEventListener("astro:page-load", init);
+
+export { initTooltip, showTooltip, hideTooltip };

package/src/youtube/YouTube.astro

@@ -0,0 +1,119 @@
+---
+/**
+ * YouTube component — lightweight facade that shows a thumbnail placeholder
+ * and loads the full YouTube iframe only when clicked.
+ *
+ * Inspired by lite-youtube-embed. Uses youtube-nocookie.com for privacy.
+ *
+ * Usage:
+ *   <YouTube id="xlABhbnNrfI" title="How to set up Material for MkDocs" />
+ */
+
+interface Props {
+  /** YouTube video ID (the part after v= in the URL) */
+  id: string;
+  /** Accessible title for the video */
+  title?: string;
+  /** Custom poster image URL. Defaults to YouTube's maxresdefault thumbnail. */
+  poster?: string;
+  /** Poster quality when using default YouTube thumbnails */
+  posterQuality?: "default" | "hqdefault" | "mqdefault" | "sddefault" | "maxresdefault";
+  /** Additional YouTube player parameters (e.g. "start=30&autoplay=1") */
+  params?: string;
+  /** Embed domain. Default: "www.youtube.com". Use "www.youtube-nocookie.com" for enhanced privacy. */
+  domain?: string;
+  /** Aspect ratio class (default: aspect-video = 16:9) */
+  aspectRatio?: string;
+  class?: string;
+}
+
+const {
+  id,
+  title = "YouTube video",
+  poster,
+  posterQuality = "hqdefault",
+  params = "",
+  domain = "www.youtube.com",
+  aspectRatio = "aspect-video",
+  class: className,
+} = Astro.props;
+
+const posterUrl = poster || `https://i.ytimg.com/vi/${id}/${posterQuality}.jpg`;
+const embedUrl = `https://${domain}/embed/${id}?autoplay=1${params ? "&" + params : ""}`;
+---
+
+<div
+  class:list={[
+    "group/yt relative w-full cursor-pointer overflow-hidden rounded-lg bg-black",
+    aspectRatio,
+    className,
+  ]}
+  data-youtube={id}
+  data-embed-url={embedUrl}
+  data-title={title}
+  role="button"
+  tabindex="0"
+  aria-label={`Play: ${title}`}
+>
+  {/* Thumbnail */}
+  <img
+    src={posterUrl}
+    alt={title}
+    loading="lazy"
+    class="absolute inset-0 h-full w-full object-cover transition-opacity duration-300 group-hover/yt:opacity-80"
+  />
+
+  {/* Play button overlay */}
+  <div class="absolute inset-0 flex items-center justify-center">
+    <div class="flex h-16 w-16 items-center justify-center rounded-full bg-red-600 shadow-lg transition-transform duration-200 group-hover/yt:scale-110">
+      <svg viewBox="0 0 24 24" fill="white" class="ml-1 h-8 w-8">
+        <path d="M8 5v14l11-7z" />
+      </svg>
+    </div>
+  </div>
+
+  {/* Title bar */}
+  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent px-4 py-3">
+    <span class="text-sm font-medium text-white">{title}</span>
+  </div>
+</div>
+
+<script>
+  function initYouTube() {
+    document.querySelectorAll<HTMLElement>("[data-youtube]").forEach((el) => {
+      if ((el as any).__ytBound) return;
+      (el as any).__ytBound = true;
+
+      function activate() {
+        const embedUrl = el.getAttribute("data-embed-url") || "";
+        const videoTitle = el.getAttribute("data-title") || "YouTube video";
+
+        const iframe = document.createElement("iframe");
+        iframe.src = embedUrl;
+        iframe.title = videoTitle;
+        iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
+        iframe.allowFullscreen = true;
+        iframe.className = "absolute inset-0 h-full w-full";
+        iframe.style.border = "none";
+
+        // Replace content with iframe
+        el.innerHTML = "";
+        el.appendChild(iframe);
+        el.style.cursor = "default";
+        el.removeAttribute("role");
+        el.removeAttribute("tabindex");
+      }
+
+      el.addEventListener("click", activate, { once: true });
+      el.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          activate();
+        }
+      }, { once: true });
+    });
+  }
+
+  initYouTube();
+  document.addEventListener("astro:page-load", initYouTube);
+</script>

package/src/youtube/index.ts

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