@starwind-ui/core 1.15.1 → 1.15.2

package/dist/src/components/tooltip/Tooltip.astro

@@ -0,0 +1,282 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Time in milliseconds to wait before showing the tooltip
+   */
+  openDelay?: number;
+  /**
+   * Time in milliseconds to wait before hiding the tooltip
+   */
+  closeDelay?: number;
+  /**
+   * When true, prevents the tooltip from staying open when hovering over its content
+   */
+  disableHoverableContent?: boolean;
+};
+
+export const tooltip = tv({ base: "starwind-tooltip relative inline-block" });
+
+const {
+  openDelay = 200,
+  closeDelay = 200,
+  disableHoverableContent = false,
+  class: className,
+} = Astro.props;
+---
+
+<div
+  class={tooltip({ class: className })}
+  data-slot="tooltip"
+  data-state="closed"
+  data-open-delay={openDelay}
+  data-close-delay={closeDelay}
+  {...!disableHoverableContent && { "data-content-hoverable": "" }}
+>
+  <slot />
+</div>
+
+<script>
+  class TooltipHandler {
+    private tooltip: HTMLElement;
+    private trigger: HTMLElement | null;
+    private content: HTMLElement | null;
+    private openTimerRef: number | null = null;
+    private closeTimerRef: number | null = null;
+    private contentId: string;
+    private animationDuration = 150;
+
+    constructor(tooltip: HTMLElement, idx: number) {
+      this.contentId = `starwind-tooltip${idx}`;
+      this.tooltip = tooltip;
+      this.content = tooltip.querySelector(".starwind-tooltip-content");
+
+      // if tooltip.firstElementChild is this.content, then get the next element
+      this.trigger = tooltip.firstElementChild as HTMLElement;
+      if (this.trigger === this.content) {
+        this.trigger = this.trigger.nextElementSibling as HTMLElement;
+      }
+
+      this.trigger.classList.add("starwind-tooltip-trigger");
+
+      if (!this.trigger || !this.content) return;
+
+      // animationDuration is set with inline styles through passed prop to TooltipContent
+      const animationDurationString = this.content.style.animationDuration;
+      if (animationDurationString.endsWith("ms")) {
+        this.animationDuration = parseFloat(animationDurationString);
+      } else if (animationDurationString.endsWith("s")) {
+        // using something like @playform/compress might optimize to use "s" instead of "ms"
+        this.animationDuration = parseFloat(animationDurationString) * 1000;
+      }
+      this.init();
+    }
+
+    private init() {
+      this.setupAccessibility();
+      this.setupEvents();
+    }
+
+    private setupAccessibility() {
+      if (!this.trigger || !this.content) return;
+      this.trigger.setAttribute("aria-describedby", this.contentId);
+      this.content.id = this.contentId;
+    }
+
+    private setupEvents() {
+      if (!this.trigger || !this.content) return;
+
+      // Trigger events
+      this.trigger.addEventListener("mouseenter", () => this.show());
+      this.trigger.addEventListener("mouseleave", () => this.hide());
+      this.trigger.addEventListener("focus", () => this.show(true));
+      this.trigger.addEventListener("blur", () => this.hide(true));
+
+      // Content events
+      if (this.tooltip.hasAttribute("data-content-hoverable")) {
+        this.content.addEventListener("mouseenter", () => this.show());
+        this.content.addEventListener("mouseleave", () => this.hide());
+      }
+
+      // Document events
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && this.tooltip.getAttribute("data-state") === "open") {
+          this.hide(true);
+        }
+      });
+
+      document.addEventListener("click", (e) => {
+        if (
+          !this.tooltip.contains(e.target as Node) &&
+          this.tooltip.getAttribute("data-state") === "open"
+        ) {
+          this.hide(true);
+        }
+      });
+    }
+
+    private show(immediate: boolean = false) {
+      if (!this.content || !this.trigger) return;
+      if (immediate) {
+        this.tooltip.setAttribute("data-state", "open");
+        this.content.setAttribute("data-state", "open");
+        this.content.style.display = "block";
+        this.positionTooltip();
+        this.clearOpenTimer();
+        return;
+      }
+
+      this.clearCloseTimer();
+
+      const delay = parseInt(this.tooltip.getAttribute("data-open-delay") || "700");
+      this.openTimerRef = window.setTimeout(() => {
+        if (!this.content || !this.trigger) return;
+        this.tooltip.setAttribute("data-state", "open");
+        this.content.setAttribute("data-state", "open");
+        this.content.style.display = "block";
+        this.positionTooltip();
+        this.openTimerRef = null;
+      }, delay);
+    }
+
+    private positionTooltip() {
+      if (!this.content || !this.trigger) return;
+
+      const triggerRect = this.trigger.getBoundingClientRect();
+      const contentRect = this.content.getBoundingClientRect();
+      const side = this.content.dataset.side || "top";
+      const align = this.content.dataset.align || "center";
+      const sideOffset = parseInt(this.content.dataset.sideOffset || "8");
+
+      let top = 0;
+      let left = 0;
+
+      // Calculate position based on side
+      switch (side) {
+        case "top":
+          top = triggerRect.top - contentRect.height - sideOffset;
+          break;
+        case "bottom":
+          top = triggerRect.bottom + sideOffset;
+          break;
+        case "left":
+          left = triggerRect.left - contentRect.width - sideOffset;
+          break;
+        case "right":
+          left = triggerRect.right + sideOffset;
+          break;
+      }
+
+      // Calculate alignment
+      if (side === "top" || side === "bottom") {
+        switch (align) {
+          case "center":
+            left = triggerRect.left + (triggerRect.width - contentRect.width) / 2;
+            break;
+          case "start":
+            left = triggerRect.left;
+            break;
+          case "end":
+            left = triggerRect.right - contentRect.width;
+            break;
+        }
+      } else {
+        switch (align) {
+          case "center":
+            top = triggerRect.top + (triggerRect.height - contentRect.height) / 2;
+            break;
+          case "start":
+            top = triggerRect.top;
+            break;
+          case "end":
+            top = triggerRect.bottom - contentRect.height;
+            break;
+        }
+      }
+
+      // Apply collision avoidance if enabled
+      if (this.content.hasAttribute("data-avoid-collisions")) {
+        const padding = 8;
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+
+        // Horizontal bounds
+        if (left < padding) left = padding;
+        if (left + contentRect.width > viewportWidth - padding) {
+          left = viewportWidth - contentRect.width - padding;
+        }
+
+        // Vertical bounds
+        if (top < padding) top = padding;
+        if (top + contentRect.height > viewportHeight - padding) {
+          top = viewportHeight - contentRect.height - padding;
+        }
+      }
+
+      this.content.style.top = `${top}px`;
+      this.content.style.left = `${left}px`;
+    }
+
+    private hide(immediate: boolean = false) {
+      if (!this.content || !this.trigger) return;
+      this.clearOpenTimer();
+
+      if (immediate) {
+        this.clearCloseTimer();
+        this.tooltip.setAttribute("data-state", "closed");
+        setTimeout(() => {
+          if (!this.content) return;
+          this.content.style.display = "none";
+        }, this.animationDuration);
+        this.content.setAttribute("data-state", "closed");
+        return;
+      }
+
+      this.closeTimerRef = window.setTimeout(
+        () => {
+          this.tooltip.setAttribute("data-state", "closed");
+          setTimeout(() => {
+            if (!this.content) return;
+            this.content.style.display = "none";
+          }, this.animationDuration);
+          if (!this.content) return;
+          this.content.setAttribute("data-state", "closed");
+          this.closeTimerRef = null;
+        },
+        parseInt(this.tooltip.getAttribute("data-close-delay") || "300"),
+      );
+    }
+
+    private clearOpenTimer() {
+      if (this.openTimerRef) {
+        window.clearTimeout(this.openTimerRef);
+        this.openTimerRef = null;
+      }
+    }
+
+    private clearCloseTimer() {
+      if (this.closeTimerRef) {
+        window.clearTimeout(this.closeTimerRef);
+        this.closeTimerRef = null;
+      }
+    }
+  }
+
+  // Store instances in a WeakMap to avoid memory leaks
+  const tooltipInstances = new WeakMap<HTMLElement, TooltipHandler>();
+  let tooltipCounter = 0;
+
+  const setupTooltips = () => {
+    document.querySelectorAll<HTMLElement>(".starwind-tooltip").forEach((tooltip) => {
+      if (!tooltipInstances.has(tooltip)) {
+        tooltipInstances.set(tooltip, new TooltipHandler(tooltip, tooltipCounter++));
+      }
+    });
+  };
+
+  setupTooltips();
+  document.addEventListener("astro:after-swap", setupTooltips);
+  document.addEventListener("starwind:init", setupTooltips);
+</script>

package/dist/src/components/tooltip/TooltipContent.astro

@@ -0,0 +1,89 @@
+---
+import CaretUp from "@tabler/icons/filled/caret-up.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Side of the tooltip
+   * @default top
+   */
+  side?: "top" | "right" | "bottom" | "left";
+  /**
+   * Alignment of the tooltip
+   * @default center
+   */
+  align?: "start" | "center" | "end";
+  /**
+   * Offset distance in pixels
+   * @default 8
+   */
+  sideOffset?: number;
+  /**
+   * Prevent the tooltip from colliding with other elements
+   * @default true
+   */
+  avoidCollisions?: boolean;
+  /**
+   * Open and close animation duration in milliseconds
+   * @default 150
+   */
+  animationDuration?: number;
+};
+
+export const tooltipContent = tv({
+  base: [
+    "starwind-tooltip-content",
+    "fixed z-50 hidden w-fit px-3 py-1.5",
+    "bg-foreground text-background rounded-md",
+    "animate-in fade-in zoom-in-95",
+    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
+  ],
+  variants: {
+    side: {
+      left: "slide-in-from-right-2",
+      right: "slide-in-from-left-2",
+      bottom: "slide-in-from-top-2",
+      top: "slide-in-from-bottom-2",
+    },
+  },
+  defaultVariants: { side: "top" },
+});
+
+export const tooltipCaret = tv({
+  base: ["text-foreground absolute z-50 size-4"],
+  variants: {
+    side: {
+      top: "bottom-0 left-1/2 -translate-x-1/2 translate-y-[calc(50%+1px)] rotate-180",
+      bottom: "top-0 left-1/2 -translate-x-1/2 -translate-y-[calc(50%+1px)]",
+      left: "top-1/2 right-0 translate-x-[calc(50%+1px)] -translate-y-1/2 rotate-90",
+      right: "top-1/2 left-0 -translate-x-[calc(50%+1px)] -translate-y-1/2 -rotate-90",
+    },
+  },
+  defaultVariants: { side: "top" },
+});
+
+const {
+  side = "top",
+  align = "center",
+  sideOffset = 8,
+  avoidCollisions = true,
+  animationDuration = 150,
+  class: className,
+} = Astro.props;
+---
+
+<div
+  class={tooltipContent({ side, class: className })}
+  data-slot="tooltip-content"
+  data-state="closed"
+  data-side={side}
+  data-align={align}
+  data-side-offset={sideOffset}
+  {...avoidCollisions && { "data-avoid-collisions": "" }}
+  role="tooltip"
+  style={{ animationDuration: `${animationDuration}ms` }}
+>
+  <slot> My tooltip! </slot>
+  <CaretUp class={tooltipCaret({ side })} />
+</div>

package/dist/src/components/tooltip/TooltipTrigger.astro

@@ -0,0 +1,10 @@
+---
+/**
+ * This component is used to trigger the tooltip
+ * All it does is require a slot
+ */
+
+type Props = { children: any };
+---
+
+<slot />

package/dist/src/components/tooltip/index.ts

@@ -0,0 +1,16 @@
+import Tooltip, { tooltip } from "./Tooltip.astro";
+import TooltipContent, { tooltipContent } from "./TooltipContent.astro";
+import TooltipTrigger from "./TooltipTrigger.astro";
+
+const TooltipVariants = {
+  tooltip,
+  tooltipContent,
+};
+
+export { Tooltip, TooltipContent, TooltipTrigger, TooltipVariants };
+
+export default {
+  Root: Tooltip,
+  Trigger: TooltipTrigger,
+  Content: TooltipContent,
+};

package/dist/src/components/video/Video.astro

@@ -0,0 +1,120 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+export const video = tv({
+  base: "starwind-video aspect-video h-auto w-full",
+});
+
+type Props = HTMLAttributes<"video"> &
+  HTMLAttributes<"iframe"> & {
+    src: string;
+    title?: string;
+    autoplay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    controls?: boolean;
+    poster?: string;
+  };
+
+const {
+  class: className,
+  src,
+  title = "Video",
+  autoplay = false,
+  muted = false,
+  loop = false,
+  controls = true,
+  poster,
+  ...rest
+} = Astro.props;
+
+/**
+ * Detects the video type from the src URL
+ */
+function getVideoType(url: string): "youtube" | "youtube-shorts" | "native" {
+  if (url.includes("youtube.com/shorts/") || url.includes("youtu.be/shorts/")) {
+    return "youtube-shorts";
+  }
+  if (
+    url.includes("youtube.com") ||
+    url.includes("youtu.be") ||
+    url.includes("youtube-nocookie.com")
+  ) {
+    return "youtube";
+  }
+  return "native";
+}
+
+/**
+ * Extracts YouTube video ID from various URL formats
+ */
+function getYouTubeId(url: string): string | null {
+  const patterns = [
+    /youtube\.com\/shorts\/([^?&]+)/,
+    /youtube\.com\/watch\?v=([^&]+)/,
+    /youtube\.com\/embed\/([^?&]+)/,
+    /youtu\.be\/([^?&]+)/,
+    /youtube-nocookie\.com\/embed\/([^?&]+)/,
+  ];
+
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match) return match[1];
+  }
+  return null;
+}
+
+/**
+ * Builds YouTube embed URL with parameters
+ */
+function buildYouTubeEmbedUrl(videoId: string, isShort: boolean): string {
+  const params = new URLSearchParams();
+  if (autoplay) params.set("autoplay", "1");
+  if (muted) params.set("mute", "1");
+  if (loop) {
+    params.set("loop", "1");
+    params.set("playlist", videoId);
+  }
+  if (!controls) params.set("controls", "0");
+
+  const baseUrl = `https://www.youtube-nocookie.com/embed/${videoId}`;
+  const queryString = params.toString();
+  return queryString ? `${baseUrl}?${queryString}` : baseUrl;
+}
+
+const videoType = getVideoType(src);
+const youtubeId = videoType !== "native" ? getYouTubeId(src) : null;
+const isShort = videoType === "youtube-shorts";
+const embedUrl = youtubeId ? buildYouTubeEmbedUrl(youtubeId, isShort) : null;
+---
+
+{
+  videoType === "native" || !embedUrl ? (
+    <video
+      class={video({ class: className })}
+      src={src}
+      autoplay={autoplay}
+      muted={muted}
+      loop={loop}
+      controls={controls}
+      poster={poster}
+      data-slot="video"
+      {...rest}
+    >
+      <track kind="captions" />
+    </video>
+  ) : (
+    <iframe
+      class={video({ class: className })}
+      src={embedUrl}
+      title={title}
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+      data-slot="video"
+      data-video-type={isShort ? "youtube-shorts" : "youtube"}
+      {...rest}
+    />
+  )
+}

package/dist/src/components/video/index.ts

@@ -0,0 +1,9 @@
+import Video, { video } from "./Video.astro";
+
+const VideoVariants = {
+  video,
+};
+
+export { Video, VideoVariants };
+
+export default Video;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starwind-ui/core",
-  "version": "1.15.1",
+  "version": "1.15.2",
   "description": "Starwind UI core components and registry",
   "license": "MIT",
   "author": {