@starwind-ui/core 1.12.4 → 1.13.0

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

@@ -158,15 +158,17 @@ const dataState = defaultPressed ? "on" : "off";
 
   // 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, idx) => {
+    document.querySelectorAll<HTMLButtonElement>(".starwind-toggle").forEach((toggle) => {
       if (!toggleInstances.has(toggle)) {
-        toggleInstances.set(toggle, new ToggleHandler(toggle, idx));
+        toggleInstances.set(toggle, new ToggleHandler(toggle, toggleCounter++));
       }
     });
   };
 
   setupToggles();
   document.addEventListener("astro:after-swap", setupToggles);
+  document.addEventListener("starwind:init", setupToggles);
 </script>

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

@@ -223,15 +223,17 @@ const {
 
   // 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, idx) => {
+    document.querySelectorAll<HTMLElement>(".starwind-tooltip").forEach((tooltip) => {
       if (!tooltipInstances.has(tooltip)) {
-        tooltipInstances.set(tooltip, new TooltipHandler(tooltip, idx));
+        tooltipInstances.set(tooltip, new TooltipHandler(tooltip, tooltipCounter++));
       }
     });
   };
 
   setupTooltips();
   document.addEventListener("astro:after-swap", setupTooltips);
+  document.addEventListener("starwind:init", setupTooltips);
 </script>

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

@@ -34,7 +34,7 @@ type Props = HTMLAttributes<"div"> & {
 export const tooltipContent = tv({
   base: [
     "starwind-tooltip-content",
-    "absolute z-50 hidden px-3 py-1.5 whitespace-nowrap shadow-xs will-change-transform",
+    "absolute z-50 hidden w-fit px-3 py-1.5 will-change-transform",
     "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",

package/dist/src/components/video/Video.astro

@@ -0,0 +1,120 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+export const video = tv({
+  base: "starwind-video aspect-video h-auto w-full",
+});
+
+type Props = HTMLAttributes<"video"> &
+  HTMLAttributes<"iframe"> & {
+    src: string;
+    title?: string;
+    autoplay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    controls?: boolean;
+    poster?: string;
+  };
+
+const {
+  class: className,
+  src,
+  title = "Video",
+  autoplay = false,
+  muted = false,
+  loop = false,
+  controls = true,
+  poster,
+  ...rest
+} = Astro.props;
+
+/**
+ * Detects the video type from the src URL
+ */
+function getVideoType(url: string): "youtube" | "youtube-shorts" | "native" {
+  if (url.includes("youtube.com/shorts/") || url.includes("youtu.be/shorts/")) {
+    return "youtube-shorts";
+  }
+  if (
+    url.includes("youtube.com") ||
+    url.includes("youtu.be") ||
+    url.includes("youtube-nocookie.com")
+  ) {
+    return "youtube";
+  }
+  return "native";
+}
+
+/**
+ * Extracts YouTube video ID from various URL formats
+ */
+function getYouTubeId(url: string): string | null {
+  const patterns = [
+    /youtube\.com\/shorts\/([^?&]+)/,
+    /youtube\.com\/watch\?v=([^&]+)/,
+    /youtube\.com\/embed\/([^?&]+)/,
+    /youtu\.be\/([^?&]+)/,
+    /youtube-nocookie\.com\/embed\/([^?&]+)/,
+  ];
+
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match) return match[1];
+  }
+  return null;
+}
+
+/**
+ * Builds YouTube embed URL with parameters
+ */
+function buildYouTubeEmbedUrl(videoId: string, isShort: boolean): string {
+  const params = new URLSearchParams();
+  if (autoplay) params.set("autoplay", "1");
+  if (muted) params.set("mute", "1");
+  if (loop) {
+    params.set("loop", "1");
+    params.set("playlist", videoId);
+  }
+  if (!controls) params.set("controls", "0");
+
+  const baseUrl = `https://www.youtube-nocookie.com/embed/${videoId}`;
+  const queryString = params.toString();
+  return queryString ? `${baseUrl}?${queryString}` : baseUrl;
+}
+
+const videoType = getVideoType(src);
+const youtubeId = videoType !== "native" ? getYouTubeId(src) : null;
+const isShort = videoType === "youtube-shorts";
+const embedUrl = youtubeId ? buildYouTubeEmbedUrl(youtubeId, isShort) : null;
+---
+
+{
+  videoType === "native" || !embedUrl ? (
+    <video
+      class={video({ class: className })}
+      src={src}
+      autoplay={autoplay}
+      muted={muted}
+      loop={loop}
+      controls={controls}
+      poster={poster}
+      data-slot="video"
+      {...rest}
+    >
+      <track kind="captions" />
+    </video>
+  ) : (
+    <iframe
+      class={video({ class: className })}
+      src={embedUrl}
+      title={title}
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+      data-slot="video"
+      data-video-type={isShort ? "youtube-shorts" : "youtube"}
+      {...rest}
+    />
+  )
+}

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

@@ -0,0 +1,9 @@
+import Video, { video } from "./Video.astro";
+
+const VideoVariants = {
+  video,
+};
+
+export { Video, VideoVariants };
+
+export default Video;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starwind-ui/core",
-  "version": "1.12.4",
+  "version": "1.13.0",
   "description": "Starwind UI core components and registry",
   "license": "MIT",
   "author": {
@@ -29,8 +29,8 @@
   ],
   "devDependencies": {
     "astro": "^5.11.0",
-    "fs-extra": "^11.3.0",
-    "glob": "^11.0.3",
+    "fs-extra": "^11.3.3",
+    "glob": "^13.0.0",
     "tailwindcss": "^4.1.11",
     "tsup": "^8.5.0"
   },
@@ -40,6 +40,8 @@
     "dev": "tsup --watch",
     "core:link": "pnpm link --global",
     "core:unlink": "pnpm rm --global @starwind-ui/core",
+    "core:yalc:link": "yalc publish",
+    "core:yalc:unlink": "yalc remove @starwind-ui/core",
     "publish:beta": "pnpm publish --tag beta --access public",
     "publish:next": "pnpm publish --tag next --access public",
     "publish:release": "pnpm publish --access public"