@starwind-ui/core 1.14.0 → 1.15.1

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

@@ -1,29 +0,0 @@
-import type { PromiseOptions, PromiseStateOption, ToastOptions, Variant } from "./toast-manager";
-import { toast } from "./toast-manager";
-import ToastDescription from "./ToastDescription.astro";
-import Toaster from "./Toaster.astro";
-import ToastItem from "./ToastItem.astro";
-import ToastTemplate from "./ToastTemplate.astro";
-import ToastTitle from "./ToastTitle.astro";
-
-export {
-  type PromiseOptions,
-  type PromiseStateOption,
-  toast,
-  ToastDescription,
-  Toaster,
-  ToastItem,
-  type ToastOptions,
-  ToastTemplate,
-  ToastTitle,
-  type Variant,
-};
-
-export default {
-  Manager: toast,
-  Viewport: Toaster,
-  Item: ToastItem,
-  Title: ToastTitle,
-  Description: ToastDescription,
-  Template: ToastTemplate,
-};

package/dist/src/components/toast/toast-manager.ts

@@ -1,216 +0,0 @@
-/**
- * Starwind Toast API
- *
- * A simple, framework-agnostic toast notification system.
- *
- * @example
- * ```ts
- * import { toast } from "@/components/starwind/toast";
- *
- * // Simple usage
- * toast("Hello world");
- * toast({ title: "Success", description: "Item saved" });
- *
- * // Variant shortcuts
- * toast.success("Saved successfully");
- * toast.error("Something went wrong");
- * toast.warning("Please check your input");
- * toast.info("New update available");
- * toast.loading("Processing...");
- *
- * // Promise handling
- * toast.promise(saveData(), {
- *   loading: "Saving...",
- *   success: "Saved!",
- *   error: "Failed to save",
- * });
- *
- * // Management
- * const id = toast("Processing...");
- * toast.update(id, { title: "Almost done..." });
- * toast.dismiss(id);
- * toast.dismiss(); // dismiss all
- * ```
- */
-
-export type Variant = "default" | "success" | "error" | "warning" | "info" | "loading";
-
-export interface ToastOptions {
-  id?: string;
-  title?: string;
-  description?: string;
-  variant?: Variant;
-  /** Duration in ms. Set to 0 for infinite (no auto-dismiss). */
-  duration?: number;
-  /** Callback when toast close animation starts */
-  onClose?: () => void;
-  /** Callback when toast is removed from DOM */
-  onRemove?: () => void;
-  action?: {
-    label: string;
-    onClick: () => void;
-  };
-}
-
-export interface PromiseStateOption {
-  title?: string;
-  description?: string;
-  duration?: number;
-}
-
-export type PromiseStateValue<T> =
-  | string
-  | PromiseStateOption
-  | ((data: T) => string | PromiseStateOption);
-
-export interface PromiseOptions<T, E = Error> {
-  loading: string | PromiseStateOption;
-  success: PromiseStateValue<T>;
-  error: PromiseStateValue<E>;
-}
-
-interface ToastManager {
-  add(options: ToastOptions): string;
-  update(id: string, options: Partial<ToastOptions>): void;
-  close(id: string): void;
-  closeAll(): void;
-}
-
-/**
- * Get the toast manager instance from the window
- */
-function getManager(): ToastManager | null {
-  if (typeof window === "undefined") return null;
-  return (window as any).__starwind__.toast as ToastManager | null;
-}
-
-/**
- * Normalize a string or options object to ToastOptions
- */
-function normalizeOption<T>(
-  value: string | PromiseStateOption | ((data: T) => string | PromiseStateOption),
-  data?: T,
-): Omit<ToastOptions, "variant"> {
-  const resolved = typeof value === "function" ? value(data as T) : value;
-  if (typeof resolved === "string") {
-    return { title: resolved };
-  }
-  return resolved;
-}
-
-/**
- * Create a toast notification
- */
-function createToast(
-  messageOrOptions: string | ToastOptions,
-  extraOptions?: Omit<ToastOptions, "title">,
-): string {
-  let options: ToastOptions;
-  if (typeof messageOrOptions === "string") {
-    options = { title: messageOrOptions, ...extraOptions };
-  } else {
-    options = messageOrOptions;
-  }
-
-  const manager = getManager();
-  if (manager) {
-    return manager.add(options);
-  }
-
-  console.warn("Toast: No Toaster found. Add <Toaster /> to your layout.");
-  return "";
-}
-
-/**
- * Create a toast with a specific variant
- */
-function createVariantToast(
-  variant: Variant,
-  message: string,
-  options?: Omit<ToastOptions, "variant">,
-): string {
-  return createToast({ ...options, title: message, variant });
-}
-
-/**
- * Toast API interface
- */
-interface ToastAPI {
-  (message: string, options?: Omit<ToastOptions, "title">): string;
-  (options: ToastOptions): string;
-  success(message: string, options?: Omit<ToastOptions, "variant">): string;
-  error(message: string, options?: Omit<ToastOptions, "variant">): string;
-  warning(message: string, options?: Omit<ToastOptions, "variant">): string;
-  info(message: string, options?: Omit<ToastOptions, "variant">): string;
-  loading(message: string, options?: Omit<ToastOptions, "variant">): string;
-  promise<T, E = Error>(promise: Promise<T>, options: PromiseOptions<T, E>): Promise<T>;
-  update(id: string, options: Partial<ToastOptions>): void;
-  dismiss(id?: string): void;
-}
-
-/**
- * Main toast function with variant methods attached
- */
-const toast = createToast as ToastAPI;
-
-toast.success = (message: string, options?: Omit<ToastOptions, "variant">) =>
-  createVariantToast("success", message, options);
-
-toast.error = (message: string, options?: Omit<ToastOptions, "variant">) =>
-  createVariantToast("error", message, options);
-
-toast.warning = (message: string, options?: Omit<ToastOptions, "variant">) =>
-  createVariantToast("warning", message, options);
-
-toast.info = (message: string, options?: Omit<ToastOptions, "variant">) =>
-  createVariantToast("info", message, options);
-
-toast.loading = (message: string, options?: Omit<ToastOptions, "variant">) =>
-  createVariantToast("loading", message, { ...options, duration: 0 });
-
-toast.promise = async <T, E = Error>(
-  promise: Promise<T>,
-  options: PromiseOptions<T, E>,
-): Promise<T> => {
-  const loadingOpts = normalizeOption(options.loading);
-  const id = createToast({
-    ...loadingOpts,
-    variant: "loading",
-    duration: 0, // Don't auto-dismiss while loading
-  });
-
-  try {
-    const data = await promise;
-    const successOpts = normalizeOption(options.success, data);
-    toast.update(id, { ...successOpts, variant: "success" });
-    return data;
-  } catch (error) {
-    const errorOpts = normalizeOption(options.error, error as E);
-    toast.update(id, { ...errorOpts, variant: "error" });
-    throw error;
-  }
-};
-
-toast.update = (id: string, options: Partial<ToastOptions>): void => {
-  const manager = getManager();
-  if (manager) {
-    manager.update(id, options);
-  } else {
-    console.warn("Toast: No Toaster found. Add <Toaster /> to your layout.");
-  }
-};
-
-toast.dismiss = (id?: string): void => {
-  const manager = getManager();
-  if (!manager) {
-    // Can't dismiss if manager isn't ready
-    return;
-  }
-  if (id) {
-    manager.close(id);
-  } else {
-    manager.closeAll();
-  }
-};
-
-export { toast };

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

@@ -1,174 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { tv, type VariantProps } from "tailwind-variants";
-
-export const toggle = tv({
-  base: [
-    "inline-flex items-center justify-center gap-2 rounded-md font-medium whitespace-nowrap",
-    "disabled:pointer-events-none disabled:opacity-50",
-    "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
-    "[&_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",
-  ],
-  variants: {
-    variant: {
-      default: "hover:bg-muted hover:text-muted-foreground bg-transparent",
-      outline:
-        "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs",
-    },
-    size: {
-      sm: "h-9 min-w-9 px-2 text-sm",
-      md: "h-11 min-w-11 px-2.5 text-base",
-      lg: "h-12 min-w-12 px-3 text-lg",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "md",
-  },
-});
-
-type Props = VariantProps<typeof toggle> &
-  HTMLAttributes<"button"> & {
-    /**
-     * The pressed state of the toggle when initially rendered
-     */
-    defaultPressed?: boolean;
-    /**
-     * Optional sync group name. When set, all toggles with the same sync group will mirror each other's state
-     */
-    syncGroup?: string;
-  };
-
-const { class: className, defaultPressed = false, syncGroup, variant, size, ...rest } = Astro.props;
-
-const dataState = defaultPressed ? "on" : "off";
----
-
-<button
-  type="button"
-  class={toggle({ variant, size, class: `starwind-toggle ${className || ""}` })}
-  data-slot="toggle"
-  data-state={dataState}
-  data-sync-group={syncGroup}
-  aria-pressed={defaultPressed}
-  {...rest}
->
-  <slot />
-</button>
-
-<script>
-  import type { ToggleChangeEvent, ToggleSyncEvent } from "./ToggleTypes";
-
-  class ToggleHandler {
-    private toggle: HTMLButtonElement;
-    private syncGroup?: string;
-
-    constructor(toggle: HTMLButtonElement, idx: number) {
-      this.toggle = toggle;
-      this.syncGroup = toggle.dataset.syncGroup;
-
-      if (!this.toggle.id) {
-        this.toggle.id = `starwind-toggle${idx}`;
-      }
-
-      this.setupEventListeners();
-
-      if (this.syncGroup) {
-        this.setupSyncListener();
-      }
-    }
-
-    private setupEventListeners(): void {
-      this.toggle.addEventListener("click", () => this.handleToggle());
-      this.toggle.addEventListener("keydown", (event) => this.handleKeyDown(event));
-    }
-
-    private setupSyncListener(): void {
-      if (!this.syncGroup) return;
-
-      document.addEventListener(`starwind-toggle-sync:${this.syncGroup}`, ((e: ToggleSyncEvent) => {
-        // Don't sync if this toggle triggered the event
-        if (e.detail.sourceId === this.toggle.id) return;
-
-        const newPressed = e.detail.pressed;
-        this.updateState(newPressed, false); // false = don't dispatch sync event
-      }) as EventListener);
-    }
-
-    private handleToggle(): void {
-      if (this.isDisabled()) return;
-
-      const isPressed = this.toggle.getAttribute("aria-pressed") === "true";
-      const newPressed = !isPressed;
-
-      this.updateState(newPressed, true);
-    }
-
-    private handleKeyDown(event: KeyboardEvent): void {
-      if (this.isDisabled()) return;
-
-      if (event.key === " " || event.key === "Enter") {
-        event.preventDefault();
-        this.handleToggle();
-      }
-    }
-
-    private isDisabled(): boolean {
-      return this.toggle.disabled;
-    }
-
-    private updateState(pressed: boolean, dispatchSync: boolean): void {
-      const newState = pressed ? "on" : "off";
-
-      this.toggle.setAttribute("aria-pressed", pressed.toString());
-      this.toggle.setAttribute("data-state", newState);
-
-      // Dispatch change event (always fired for user to listen to)
-      const changeEvent = new CustomEvent<ToggleChangeEvent["detail"]>("starwind-toggle:change", {
-        detail: {
-          pressed,
-          toggleId: this.toggle.id,
-          syncGroup: this.syncGroup,
-        },
-        bubbles: true,
-        cancelable: true,
-      });
-
-      this.toggle.dispatchEvent(changeEvent);
-
-      // Dispatch sync event if in a sync group and requested
-      if (this.syncGroup && dispatchSync) {
-        const syncEvent = new CustomEvent<ToggleSyncEvent["detail"]>(
-          `starwind-toggle-sync:${this.syncGroup}`,
-          {
-            detail: {
-              pressed,
-              sourceId: this.toggle.id,
-            },
-          },
-        );
-
-        document.dispatchEvent(syncEvent);
-      }
-    }
-  }
-
-  // Store instances in a WeakMap to avoid memory leaks
-  const toggleInstances = new WeakMap<HTMLElement, ToggleHandler>();
-  let toggleCounter = 0;
-
-  const setupToggles = () => {
-    document.querySelectorAll<HTMLButtonElement>(".starwind-toggle").forEach((toggle) => {
-      if (!toggleInstances.has(toggle)) {
-        toggleInstances.set(toggle, new ToggleHandler(toggle, toggleCounter++));
-      }
-    });
-  };
-
-  setupToggles();
-  document.addEventListener("astro:after-swap", setupToggles);
-  document.addEventListener("starwind:init", setupToggles);
-</script>

package/dist/src/components/toggle/ToggleTypes.ts

@@ -1,14 +0,0 @@
-export interface ToggleChangeEvent extends CustomEvent {
-  detail: {
-    pressed: boolean;
-    toggleId: string;
-    syncGroup?: string;
-  };
-}
-
-export interface ToggleSyncEvent extends CustomEvent {
-  detail: {
-    pressed: boolean;
-    sourceId: string;
-  };
-}

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

@@ -1,8 +0,0 @@
-import Toggle, { toggle } from "./Toggle.astro";
-import type { ToggleChangeEvent, ToggleSyncEvent } from "./ToggleTypes";
-
-const ToggleVariants = { toggle };
-
-export { Toggle, type ToggleChangeEvent, type ToggleSyncEvent, ToggleVariants };
-
-export default Toggle;

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

@@ -1,239 +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>();
-  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>