npm - @starwind-ui/core - Versions diffs - 1.13.0 → 1.15.0 - Mend

@starwind-ui/core 1.13.0 → 1.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/dist/src/components/theme-toggle/ThemeToggle.astro ADDED Viewed

@@ -0,0 +1,208 @@
+---
+// put the following script in the <head> of each page of your site
+// this ensures it is run early to eliminate any flashes of incorrect color theme
+/*
+<script is:inline>
+  function initTheme() {
+    const colorTheme = localStorage.getItem("colorTheme");
+    if (!colorTheme) {
+      // if no color theme yet, use the users preferences
+      if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        document.documentElement.classList.add("dark");
+        localStorage.setItem("colorTheme", "dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+        localStorage.setItem("colorTheme", "light");
+      }
+    } else {
+      // assign the theme based on the value in local storage
+      if (colorTheme === "dark") {
+        document.documentElement.classList.add("dark");
+      } else if (colorTheme === "light") {
+        document.documentElement.classList.remove("dark");
+      } else if (colorTheme === "system") {
+        // use system preference
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        document.documentElement.classList.toggle("dark", prefersDark);
+      }
+    }
+  }
+  // runs on initial page load
+  initTheme();
+  // runs on view transitions navigation
+  document.addEventListener("astro:after-swap", initTheme);
+</script>
+*/
+import Moon from "@tabler/icons/outline/moon.svg";
+import Sun from "@tabler/icons/outline/sun.svg";
+import { tv, type VariantProps } from "tailwind-variants";
+import { Toggle, ToggleVariants } from "@/components/starwind/toggle";
+export const themeToggle = tv({
+  base: [
+    "starwind-theme-toggle",
+    "group hover:border-muted-foreground hover:bg-transparent data-[state=on]:bg-transparent",
+  ],
+});
+type Props = VariantProps<typeof ToggleVariants.toggle> & {
+  /**
+   * The ARIA label for the toggle
+   */
+  ariaLabel?: string;
+  /**
+   * Additional classes for the toggle
+   */
+  class?: string;
+};
+const {
+  class: className = "",
+  variant = "outline",
+  size = "md",
+  ariaLabel = "Toggle theme",
+  ...rest
+} = Astro.props as Props;
+---
+<Toggle
+  class={themeToggle({ class: className })}
+  variant={variant}
+  size={size}
+  aria-label={ariaLabel}
+  data-slot="theme-toggle"
+  {...rest}
+>
+  <slot>
+    <span class="size-5" data-theme-icon-wrapper>
+      <slot name="light-icon">
+        <Sun class="hidden size-5 group-data-[state=off]:data-ready:block" data-theme-icon />
+      </slot>
+      <slot name="dark-icon">
+        <Moon class="hidden size-5 group-data-[state=on]:data-ready:block" data-theme-icon />
+      </slot>
+    </span>
+  </slot>
+</Toggle>
+<script>
+  import type { ToggleChangeEvent } from "@/components/starwind/toggle";
+  class ThemeToggleHandler {
+    private toggle: HTMLButtonElement;
+    private isInitializing = true;
+    constructor(toggle: HTMLButtonElement) {
+      this.toggle = toggle;
+      this.initializeState();
+      this.setupEventListeners();
+      // Mark initialization complete after a microtask
+      queueMicrotask(() => {
+        this.isInitializing = false;
+      });
+    }
+    private initializeState(): void {
+      // Determine if dark mode is active based on the document class
+      // This handles "system" correctly since initTheme already applied the right class
+      const isDark = document.documentElement.classList.contains("dark");
+      this.toggle.setAttribute("data-state", isDark ? "on" : "off");
+      this.toggle.setAttribute("aria-pressed", isDark.toString());
+      // Mark icons as ready to show (prevents flash of wrong icon)
+      this.toggle.querySelectorAll("[data-theme-icon]").forEach((icon) => {
+        icon.setAttribute("data-ready", "");
+      });
+    }
+    private setupEventListeners(): void {
+      this.toggle.addEventListener("starwind-toggle:change", (event: Event) =>
+        this.handleToggleChange(event),
+      );
+    }
+    private handleToggleChange(event: Event): void {
+      // Don't dispatch theme:change during initialization
+      if (this.isInitializing) {
+        return;
+      }
+      const { pressed } = (event as ToggleChangeEvent).detail;
+      // Update theme based on toggle state
+      const newTheme = pressed ? "dark" : "light";
+      document.documentElement.classList.toggle("dark", pressed);
+      localStorage.setItem("colorTheme", newTheme);
+      // Dispatch custom event to sync other theme toggles
+      document.dispatchEvent(
+        new CustomEvent("theme:change", {
+          detail: { theme: newTheme },
+        }),
+      );
+    }
+    public syncState(theme: string): void {
+      let shouldBeOn: boolean;
+      if (theme === "system") {
+        shouldBeOn = document.documentElement.classList.contains("dark");
+      } else {
+        shouldBeOn = theme === "dark";
+      }
+      const newState = shouldBeOn ? "on" : "off";
+      // Only update if state actually changed to prevent loops
+      if (this.toggle.getAttribute("data-state") !== newState) {
+        this.toggle.setAttribute("data-state", newState);
+        this.toggle.setAttribute("aria-pressed", shouldBeOn.toString());
+      }
+    }
+  }
+  // Store instances in a WeakMap to avoid memory leaks
+  const themeToggleInstances = new WeakMap<HTMLElement, ThemeToggleHandler>();
+  // Track active toggles for iteration (WeakMap is not iterable)
+  const activeToggles = new Set<HTMLButtonElement>();
+  const setupThemeToggles = (clearExisting = false) => {
+    // Clear stale references on page transitions to prevent memory leaks
+    if (clearExisting) {
+      activeToggles.clear();
+    }
+    document.querySelectorAll<HTMLButtonElement>(".starwind-theme-toggle").forEach((toggle) => {
+      if (!themeToggleInstances.has(toggle)) {
+        themeToggleInstances.set(toggle, new ThemeToggleHandler(toggle));
+      }
+      activeToggles.add(toggle);
+    });
+  };
+  // Listen for theme changes from other toggles
+  const handleThemeChange = (event: Event) => {
+    const { theme } = (event as CustomEvent).detail;
+    activeToggles.forEach((toggle) => {
+      const instance = themeToggleInstances.get(toggle);
+      if (instance) {
+        instance.syncState(theme);
+      }
+    });
+  };
+  document.addEventListener("theme:change", handleThemeChange);
+  setupThemeToggles();
+  document.addEventListener("astro:after-swap", () => setupThemeToggles(true));
+  document.addEventListener("starwind:init", () => setupThemeToggles());
+</script>

package/dist/src/components/theme-toggle/index.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import ThemeToggle, { themeToggle } from "./ThemeToggle.astro";
+const ThemeToggleVariants = { themeToggle };
+export { ThemeToggle, ThemeToggleVariants };
+export default ThemeToggle;

package/dist/src/components/toggle/Toggle.astro CHANGED Viewed

@@ -10,7 +10,7 @@ export const toggle = tv({
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     "focus-visible:border-outline focus-visible:ring-outline/50 focus-visible:ring-3",
     "transition-colors outline-none",
-    "aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error",
+    "aria-invalid:ring-error/40 aria-invalid:border-error",
   ],
   variants: {
     variant: {

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

@@ -100,18 +100,6 @@ const {
         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") {
@@ -135,7 +123,7 @@ const {
         this.tooltip.setAttribute("data-state", "open");
         this.content.setAttribute("data-state", "open");
         this.content.style.display = "block";
-        this.checkBoundary(this.content);
+        this.positionTooltip();
         this.clearOpenTimer();
         return;
       }
@@ -148,11 +136,89 @@ const {
         this.tooltip.setAttribute("data-state", "open");
         this.content.setAttribute("data-state", "open");
         this.content.style.display = "block";
-        this.checkBoundary(this.content);
+        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();
@@ -183,29 +249,6 @@ const {
       );
     }
-    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);

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

@@ -34,43 +34,20 @@ type Props = HTMLAttributes<"div"> & {
 export const tooltipContent = tv({
   base: [
     "starwind-tooltip-content",
-    "absolute z-50 hidden w-fit px-3 py-1.5 will-change-transform",
+    "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-(--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",
+      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", 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" },
-  ],
+  defaultVariants: { side: "top" },
 });
 export const tooltipCaret = tv({
@@ -97,17 +74,15 @@ const {
 ---
 <div
-  class={tooltipContent({ side, align, class: className })}
+  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={{
-    "--tooltip-offset": `calc(100% + ${sideOffset}px)`,
-    animationDuration: `${animationDuration}ms`,
-  }}
+  style={{ animationDuration: `${animationDuration}ms` }}
 >
   <slot> My tooltip! </slot>
   <CaretUp class={tooltipCaret({ side })} />

package/package.json CHANGED Viewed

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