@starwind-ui/core 1.15.0 → 1.15.1

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

@@ -1,282 +0,0 @@
----
-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

@@ -1,89 +0,0 @@
----
-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

@@ -1,10 +0,0 @@
----
-/**
- * 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

@@ -1,16 +0,0 @@
-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

@@ -1,120 +0,0 @@
----
-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

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