npm - @starwind-ui/core - Versions diffs - 1.15.1 → 1.15.2 - Mend

@starwind-ui/core 1.15.1 → 1.15.2

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 (216) 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/toast/ToastDescription.astro ADDED Viewed

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+export const toastDescription = tv({
+  base: "starwind-toast-description text-muted-foreground text-sm",
+});
+type Props = HTMLAttributes<"div">;
+const { class: className, ...rest } = Astro.props;
+---
+<div
+  class={toastDescription({ class: className })}
+  data-slot="toast-description"
+  data-toast-description
+  {...rest}
+>
+  <slot />
+</div>

package/dist/src/components/toast/ToastItem.astro ADDED Viewed

@@ -0,0 +1,54 @@
+---
+import X from "@tabler/icons/outline/x.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+export const toastItem = tv({
+  base: "starwind-toast bg-popover text-popover-foreground pointer-events-auto absolute inset-x-0 bottom-0 flex w-full origin-bottom flex-col gap-1 overflow-hidden rounded-lg border bg-clip-padding p-4 pr-10 shadow-lg transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-limited:pointer-events-none data-limited:opacity-0",
+  variants: {
+    variant: {
+      default: "border-border",
+      success: "border-success/80",
+      error: "border-error/80",
+      warning: "border-warning/80",
+      info: "border-info/80",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+type Variant = "default" | "success" | "error" | "warning" | "info";
+type Props = HTMLAttributes<"div"> & {
+  variant?: Variant;
+};
+const { class: className, variant = "default", ...rest } = Astro.props;
+---
+<div
+  class={toastItem({ variant, class: className })}
+  data-slot="toast"
+  data-variant={variant}
+  data-state="open"
+  role="dialog"
+  aria-modal="false"
+  {...rest}
+>
+  <div
+    class="starwind-toast-content grid gap-1 transition-opacity duration-200 data-behind:opacity-0 data-expanded:opacity-100"
+    data-slot="toast-content"
+  >
+    <slot />
+  </div>
+  <button
+    type="button"
+    class="starwind-toast-close text-muted-foreground hover:text-foreground absolute top-2 right-2 rounded-md p-1 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:outline-none"
+    data-slot="toast-close"
+    aria-label="Close notification"
+  >
+    <X class="size-4" />
+  </button>
+</div>

package/dist/src/components/toast/ToastTemplate.astro ADDED Viewed

@@ -0,0 +1,25 @@
+---
+import ToastDescription from "./ToastDescription.astro";
+import ToastItem from "./ToastItem.astro";
+import ToastTitle from "./ToastTitle.astro";
+type Variant = "default" | "success" | "error" | "warning" | "info" | "loading";
+interface Props {
+  variant: Variant;
+}
+const { variant } = Astro.props;
+// Loading variant uses default item styling but loading title styling
+const itemVariant = variant === "loading" ? "default" : variant;
+---
+<template data-toast-template={variant}>
+  <slot>
+    <ToastItem variant={itemVariant}>
+      <ToastTitle variant={variant}>Title</ToastTitle>
+      <ToastDescription>Description</ToastDescription>
+    </ToastItem>
+  </slot>
+</template>

package/dist/src/components/toast/ToastTitle.astro ADDED Viewed

@@ -0,0 +1,57 @@
+---
+import WarningIcon from "@tabler/icons/outline/alert-triangle.svg";
+import SuccessIcon from "@tabler/icons/outline/circle-check.svg";
+import ErrorIcon from "@tabler/icons/outline/circle-x.svg";
+import InfoIcon from "@tabler/icons/outline/info-circle.svg";
+import LoaderIcon from "@tabler/icons/outline/loader-2.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+export const toastTitle = tv({
+  base: "starwind-toast-title flex items-center gap-1 text-sm font-semibold [&_svg]:size-4",
+  variants: {
+    variant: {
+      default: "",
+      success: "[&_svg]:text-success",
+      error: "[&_svg]:text-error",
+      warning: "[&_svg]:text-warning",
+      info: "[&_svg]:text-info",
+      loading: "[&_svg]:text-muted-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+type Variant = "default" | "success" | "error" | "warning" | "info" | "loading";
+type Props = HTMLAttributes<"div"> & {
+  variant?: Variant;
+};
+const { class: className, variant = "default", ...rest } = Astro.props;
+const icons = {
+  default: null,
+  success: SuccessIcon,
+  error: ErrorIcon,
+  warning: WarningIcon,
+  info: InfoIcon,
+  loading: LoaderIcon,
+};
+const Icon = icons[variant];
+---
+<div
+  class={toastTitle({ variant, class: className })}
+  data-slot="toast-title"
+  data-toast-title
+  {...rest}
+>
+  <slot name="icon">
+    {Icon && (variant === "loading" ? <Icon class="animate-spin" /> : <Icon />)}
+  </slot>
+  <span data-toast-title-text><slot /></span>
+</div>