@starwind-ui/core 1.15.1 → 1.15.2

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

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

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

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

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

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