@rimelight/ui 0.0.1

package/src/components/toast/index.ts

@@ -0,0 +1 @@
+export * from "./toast-manager"

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

@@ -0,0 +1,234 @@
+/**
+ * Starwind Toast API
+ *
+ * A simple, framework-agnostic toast notification system.
+ *
+ * @example
+ *   ;```ts
+ *   import { toast } from "./toast/toast-manager"
+ *
+ *   // 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
+  }
+}
+
+declare global {
+  interface Window {
+    __starwind__: {
+      toast?: ToastManager
+    }
+  }
+}
+
+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.__starwind__?.toast ?? null
+}
+
+/**
+ * Normalize a string or options object to ToastOptions
+ */
+function normalizeOption<T>(
+  value: string | PromiseStateOption | ((data: T) => string | PromiseStateOption),
+  data?: T
+): Omit<ToastOptions, "variant"> {
+  // We use a cast here because T is generic and can't be automatically matched internally
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+  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
+ */
+// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+const toast = createToast as unknown 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) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+    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/src/components/toggle/Toggle.astro

@@ -0,0 +1,174 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export const toggle = cv({
+  base: [
+    "inline-flex items-center justify-center gap-3xs rounded-md font-medium ws-nowrap",
+    "disabled:pointer-events-none disabled:op-50",
+    "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='w-'])]:w-md [&_svg:not([class*='h-'])]:h-md",
+    "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 b bg-transparent shadow-xs",
+      ghost: "hover:bg-accent hover:text-accent-foreground bg-transparent",
+    },
+    size: {
+      sm: "h-2xl px-3xs text-sm",
+      md: "h-3xl px-2xs text-base",
+      lg: "h-3xl px-xs text-lg",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+  },
+});
+
+type Props = NonNullable<Parameters<typeof toggle>[0]> &
+  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:list={[toggle({ variant, size }), "starwind-toggle", className]}
+  data-state={dataState}
+  data-sync-group={syncGroup}
+  aria-pressed={defaultPressed}
+  {...rest}
+  data-slot="toggle"
+>
+  <slot />
+</button>
+
+<script>
+  import type { ToggleSyncEvent } from "./ToggleTypes";
+
+  class ToggleHandler {
+    private toggle: HTMLButtonElement;
+    private syncGroup: string | undefined;
+
+    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);
+
+      const changeEvent = new CustomEvent("starwind-toggle:change", {
+        detail: {
+          pressed,
+          toggleId: this.toggle.id,
+          ...(this.syncGroup ? { 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/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
+  }
+}