@starwind-ui/core 1.11.2 → 1.12.1

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

@@ -1,237 +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());
-      }
-
-      // if data-avoid-collisions exists, add resize listener to reset any translations
-      if (this.content.hasAttribute("data-avoid-collisions")) {
-        window.addEventListener(
-          "resize",
-          () => {
-            if (!this.content) return;
-            this.content.style.transform = "";
-          },
-          { passive: true },
-        );
-      }
-
-      // 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.checkBoundary(this.content);
-        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.checkBoundary(this.content);
-        this.openTimerRef = null;
-      }, delay);
-    }
-
-    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 checkBoundary(tooltipElement: HTMLElement) {
-      if (!tooltipElement) return;
-
-      // if data-avoid-collisions does not exist, return
-      if (!tooltipElement.hasAttribute("data-avoid-collisions")) return;
-
-      const viewportWidth = window.innerWidth;
-      const tooltipRect = tooltipElement.getBoundingClientRect();
-      const padding = 16; // Add some padding from viewport edges
-
-      // Check if tooltip extends beyond right edge of viewport
-      if (tooltipRect.right > viewportWidth - padding) {
-        const overflow = tooltipRect.right - (viewportWidth - padding);
-        tooltipElement.style.transform = `translateX(-${overflow + padding}px)`;
-      }
-
-      // Check if tooltip extends beyond left edge of viewport
-      if (tooltipRect.left < padding) {
-        const overflow = padding - tooltipRect.left;
-        tooltipElement.style.transform = `translateX(${overflow + padding}px)`;
-      }
-    }
-
-    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>();
-
-  const setupTooltips = () => {
-    document.querySelectorAll<HTMLElement>(".starwind-tooltip").forEach((tooltip, idx) => {
-      if (!tooltipInstances.has(tooltip)) {
-        tooltipInstances.set(tooltip, new TooltipHandler(tooltip, idx));
-      }
-    });
-  };
-
-  setupTooltips();
-  document.addEventListener("astro:after-swap", setupTooltips);
-</script>

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

@@ -1,114 +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",
-    "absolute z-50 hidden px-3 py-1.5 whitespace-nowrap shadow-xs will-change-transform",
-    "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-(--tooltip-offset)",
-      right: "slide-in-from-left-2 left-(--tooltip-offset)",
-      bottom: "slide-in-from-top-2 top-(--tooltip-offset)",
-      top: "slide-in-from-bottom-2 bottom-(--tooltip-offset)",
-    },
-    align: { center: "", start: "", end: "" },
-    sideAlign: {
-      "top-center": "left-[50%] translate-x-[-50%]",
-      "bottom-center": "left-[50%] translate-x-[-50%]",
-      "left-center": "top-[50%] translate-y-[-50%]",
-      "right-center": "top-[50%] translate-y-[-50%]",
-      "top-start": "left-0",
-      "bottom-start": "left-0",
-      "top-end": "right-0",
-      "bottom-end": "right-0",
-      "left-start": "top-0",
-      "right-start": "top-0",
-      "left-end": "bottom-0",
-      "right-end": "bottom-0",
-    },
-  },
-  defaultVariants: { side: "top", align: "center" },
-  compoundVariants: [
-    { side: ["top", "bottom"], align: "center", class: "left-[50%] translate-x-[-50%]" },
-    { side: ["left", "right"], align: "center", class: "top-[50%] translate-y-[-50%]" },
-    { side: ["top", "bottom"], align: "start", class: "left-0" },
-    { side: ["top", "bottom"], align: "end", class: "right-0" },
-    { side: ["left", "right"], align: "start", class: "top-0" },
-    { side: ["left", "right"], align: "end", class: "bottom-0" },
-  ],
-});
-
-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, align, class: className })}
-  data-slot="tooltip-content"
-  data-state="closed"
-  data-side={side}
-  data-align={align}
-  {...avoidCollisions && { "data-avoid-collisions": "" }}
-  role="tooltip"
-  style={{
-    "--tooltip-offset": `calc(100% + ${sideOffset}px)`,
-    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,
-};