@rimelight/ui 0.0.40 → 0.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [

package/src/components/checkbox/checkbox.theme.ts

@@ -21,7 +21,7 @@ export const createCheckboxTheme = (colors: readonly string[] = colorConfig.colo
           color,
           {
             root: "rl-color-" + color,
-            box: `peer-checked:bg-[var(--rl-bg)] peer-checked:border-[var(--rl-border)] focus-within:ring-[var(--rl-ring)]/50`
+            box: `peer-checked:bg-[var(--rl-bg)] peer-checked:border-[var(--rl-border)] focus-within:ring-[var(--rl-ring)]/50 peer-checked:[&_[data-slot=indicator]]:scale-100`
           }
         ])
       ),

package/src/components/header/header.theme.ts

@@ -8,9 +8,9 @@ export const createHeaderTheme = () =>
       content: "w-full",
       container:
         "flex flex-row items-center justify-between gap-4xs h-16 md:h-18 px-xs sm:px-md md:px-xl lg:px-xl",
-      left: "flex-1 min-w-0 flex items-center justify-start truncate",
+      left: "flex-1 min-w-0 flex items-center justify-start",
       center: "flex-none flex items-center justify-center mx-4",
-      right: "flex-1 min-w-0 flex items-center justify-end truncate"
+      right: "flex-1 min-w-0 flex items-center justify-end"
     },
     variants: {
       contain: {

package/src/components/navigation-menu/navigation-menu.theme.ts

@@ -14,7 +14,7 @@ export const createNavigationMenuTheme = () =>
         "absolute left-0 top-full z-50 mt-1.5 w-56 rounded-md border bg-popover p-1 text-popover-foreground shadow-md origin-top-left",
       viewportWrapper: "absolute left-0 top-full flex justify-center w-full",
       viewport:
-        "relative mt-1.5 h-auto w-full origin-[top_center] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90"
+        "relative mt-1.5 h-auto w-full origin-top overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90"
     },
     variants: {
       theme: {

package/src/components/popover/RLAPopover.astro

@@ -1,130 +1,173 @@
----
-import { scv } from "css-variants"
+---
+import { scv } from "css-variants"
 import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { PopoverProps } from "./popover"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { PopoverProps } from "./popover"
 import { resolveTheme } from "../../utils/resolveTheme"
 import popoverThemeDefault, { createPopoverTheme } from "./popover.theme"
-const popoverTheme = resolveTheme(popoverThemeDefault, createPopoverTheme)
-
-
-const popover = scv(popoverTheme)
-
-const {
-  triggerLabel,
-  placement = "bottom",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PopoverProps
-
-const classes = resolveClasses(popover, {
-  placement
-}, useUi("popover", uiProp), className)
----
-<div class={classes.root} data-slot="popover-container" data-placement={placement} {...rest}>
-  <div class={`${classes.trigger} popover-trigger`} data-slot="trigger">
-    <slot name="trigger">
-      {triggerLabel && <button type="button" class="cursor-pointer">{triggerLabel}</button>}
-    </slot>
-  </div>
-
-  <div class={`${classes.content} popover-content hidden`} data-slot="content">
-    <slot />
-  </div>
-</div>
-
-<script>
-  function initPopovers() {
-    document.querySelectorAll('[data-slot="popover-container"]').forEach(container => {
-      const el = container as any;
-      if (el.dataset && el.dataset.popoverInitialized) return;
-      if (el.dataset) el.dataset.popoverInitialized = "true";
-
-      const trigger = container.querySelector('.popover-trigger');
-      const content = container.querySelector('.popover-content') as HTMLElement;
-
-      if (!trigger || !content) return;
-
-      trigger.addEventListener('click', (e) => {
-        e.stopPropagation();
-        const isOpen = !content.classList.contains('hidden');
-        
-        document.querySelectorAll('.popover-content').forEach(otherContent => {
-          const other = otherContent as HTMLElement;
-          if (other !== content && !other.classList.contains('hidden')) {
-            other.classList.add('hidden');
-            other.style.left = '';
-            other.style.right = '';
-            other.style.transform = '';
-            other.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
-          }
-        });
-
-        if (isOpen) {
-          content.classList.add('hidden');
-          content.style.left = '';
-          content.style.right = '';
-          content.style.transform = '';
-          content.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
-        } else {
-          content.classList.remove('hidden');
-
-          // Reset styles to measure original computed bounds
-          content.style.left = '';
-          content.style.right = '';
-          content.style.transform = '';
-
-          const rect = content.getBoundingClientRect();
-          const viewportWidth = window.innerWidth;
-          const placement = container.getAttribute('data-placement') || 'bottom';
-          
-          let shift = 0;
-          const safetyMargin = 24;
-          if (rect.right > viewportWidth - safetyMargin) {
-            shift = (viewportWidth - safetyMargin) - rect.right;
-          } else if (rect.left < safetyMargin) {
-            shift = safetyMargin - rect.left;
-          }
-
-          if (shift !== 0) {
-            const isCentered = (placement === 'top' || placement === 'bottom') && 
-                               !content.classList.contains('right-0') && 
-                               !content.classList.contains('left-0');
-            if (isCentered) {
-              content.style.transform = `translateX(calc(-50% + ${shift}px))`;
-            } else {
-              content.style.transform = `translateX(${shift}px)`;
-            }
-          }
-
-          content.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: true } }));
-        }
-      });
-
-      content.addEventListener('click', (e) => {
-        e.stopPropagation();
-      });
-    });
-  }
-
-  const win = window as any;
-  if (!win.hasGlobalPopoverListener) {
-    win.hasGlobalPopoverListener = true;
-    document.addEventListener('click', () => {
-      document.querySelectorAll('.popover-content').forEach(content => {
-        const c = content as HTMLElement;
-        if (!c.classList.contains('hidden')) {
-          c.classList.add('hidden');
-          c.style.left = '';
-          c.style.right = '';
-          c.style.transform = '';
-          c.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
-        }
-      });
-    });
-  }
-
-  document.addEventListener('astro:page-load', initPopovers);
-  initPopovers();
-</script>
+
+const popoverTheme = resolveTheme(popoverThemeDefault, createPopoverTheme)
+const popover = scv(popoverTheme)
+
+const {
+  triggerLabel,
+  placement = "bottom",
+  mode = "both",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PopoverProps
+
+const classes = resolveClasses(popover, {
+  placement
+}, useUi("popover", uiProp), className)
+---
+<div class={`group/popover ${classes.root}`} data-slot="popover-container" data-placement={placement} data-mode={mode} {...rest}>
+  <div class={`${classes.trigger} popover-trigger`} data-slot="trigger">
+    <slot name="trigger">
+      {triggerLabel && <button type="button" class="cursor-pointer">{triggerLabel}</button>}
+    </slot>
+  </div>
+
+  <div class={`${classes.content} popover-content hidden`} data-slot="content">
+    <slot />
+  </div>
+</div>
+
+<script>
+  function openPopover(container: Element, content: HTMLElement) {
+    document.querySelectorAll('.popover-content').forEach(other => {
+      if (other !== content && !other.classList.contains('hidden')) {
+        other.classList.add('hidden');
+        (other as HTMLElement).style.transform = '';
+        other.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
+      }
+    });
+
+    content.classList.remove('hidden');
+    content.style.transform = '';
+
+    const rect = content.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    let shift = 0;
+    const safetyMargin = 16;
+    if (rect.right > viewportWidth - safetyMargin) {
+      shift = (viewportWidth - safetyMargin) - rect.right;
+    } else if (rect.left < safetyMargin) {
+      shift = safetyMargin - rect.left;
+    }
+
+    const placement = container.getAttribute('data-placement') || 'bottom';
+    const isCentered = (placement === 'top' || placement === 'bottom') &&
+                       !content.classList.contains('right-0') &&
+                       !content.classList.contains('left-0');
+
+    if (shift !== 0) {
+      if (isCentered) {
+        content.style.transform = `translateX(calc(-50% + ${shift}px))`;
+      } else {
+        content.style.transform = `translateX(${shift}px)`;
+      }
+    }
+
+    content.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: true } }));
+  }
+
+  function closePopover(content: HTMLElement) {
+    if (!content.classList.contains('hidden')) {
+      content.classList.add('hidden');
+      content.style.transform = '';
+      content.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
+    }
+  }
+
+  function setupPopoverListeners() {
+    const win = window as any;
+    if (win.hasGlobalPopoverListeners) return;
+    win.hasGlobalPopoverListeners = true;
+
+    let hoverTimeout: any = null;
+
+    document.addEventListener('mouseover', (e) => {
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+
+      const container = target.closest('[data-slot="popover-container"]') as HTMLElement | null;
+      if (container) {
+        const mode = container.getAttribute('data-mode') || 'both';
+        if (mode === 'hover' || mode === 'both') {
+          if (hoverTimeout) clearTimeout(hoverTimeout);
+          const content = container.querySelector('.popover-content') as HTMLElement | null;
+          if (content && content.classList.contains('hidden')) {
+            openPopover(container, content);
+          }
+        }
+      }
+    });
+
+    document.addEventListener('mouseout', (e) => {
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+
+      const container = target.closest('[data-slot="popover-container"]') as HTMLElement | null;
+      if (container) {
+        const mode = container.getAttribute('data-mode') || 'both';
+        if (mode === 'hover' || mode === 'both') {
+          const related = e.relatedTarget as HTMLElement | null;
+          if (related && container.contains(related)) return;
+
+          const content = container.querySelector('.popover-content') as HTMLElement | null;
+          if (content && !content.classList.contains('hidden')) {
+            hoverTimeout = setTimeout(() => {
+              closePopover(content);
+            }, 150);
+          }
+        }
+      }
+    });
+
+    document.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+
+      const trigger = target.closest('.popover-trigger') as HTMLElement | null;
+      if (trigger) {
+        e.stopPropagation();
+        const container = trigger.closest('[data-slot="popover-container"]');
+        if (!container) return;
+
+        const content = container.querySelector('.popover-content') as HTMLElement | null;
+        if (!content) return;
+
+        const isOpen = !content.classList.contains('hidden');
+        if (isOpen) {
+          closePopover(content);
+        } else {
+          openPopover(container, content);
+        }
+        return;
+      }
+
+      if (target.closest('.popover-content')) {
+        const isActionLink = target.closest('a') || target.closest('button[data-close-popover]');
+        if (isActionLink) {
+          document.querySelectorAll('.popover-content').forEach(other => {
+            closePopover(other as HTMLElement);
+          });
+        }
+        return;
+      }
+
+      document.querySelectorAll('.popover-content').forEach(other => {
+        closePopover(other as HTMLElement);
+      });
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', setupPopoverListeners);
+  } else {
+    setupPopoverListeners();
+  }
+  document.addEventListener('astro:page-load', setupPopoverListeners);
+</script>

package/src/components/popover/popover.theme.ts

@@ -8,13 +8,15 @@ export const createPopoverTheme = (_colors: readonly string[] = colorConfig.colo
       root: "relative inline-block",
       trigger: "",
       content: [
-        "absolute z-50 w-72 rounded-xl border border-border bg-background p-4 text-foreground shadow-lg outline-none"
+        "absolute z-50 w-72 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 text-neutral-900 dark:text-neutral-100 shadow-xl outline-none"
       ]
     },
     variants: {
       placement: {
         top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-2" },
         bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-2" },
+        "bottom-end": { content: "top-full right-0 left-auto mt-2" },
+        "bottom-start": { content: "top-full left-0 right-auto mt-2" },
         left: { content: "right-full top-1/2 -translate-y-1/2 mr-2" },
         right: { content: "left-full top-1/2 -translate-y-1/2 ml-2" }
       }

package/src/components/popover/popover.ts

@@ -10,7 +10,11 @@ export interface PopoverProps {
   /**
    * The placement of the popover relative to trigger.
    */
-  placement?: "top" | "bottom" | "left" | "right"
+  placement?: "top" | "bottom" | "bottom-end" | "bottom-start" | "left" | "right"
+  /**
+   * Trigger mode: 'click', 'hover', or 'both'.
+   */
+  mode?: "click" | "hover" | "both"
   /**
    * Slot-specific CSS class overrides.
    */

package/src/components/table-of-contents/table-of-contents.theme.ts

@@ -35,7 +35,7 @@ export const createTableOfContentsTheme = () =>
       trailingIcon:
         "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden",
       content:
-        "relative data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none",
+        "relative data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out overflow-hidden focus:outline-none",
       list: "min-w-0",
       listWithChildren: "ms-3",
       item: "min-w-0",

package/src/components/tabs/tabs.ts

@@ -29,19 +29,19 @@ export interface TabsProps<T extends TabItem = TabItem> {
   /**
    * Tab variant.
    *
-   * @defaultValue "pill"
+   * @default "pill"
    */
   variant?: "pill" | "underline" | "link" | "solid" | "pills"
   /**
    * Layout orientation.
    *
-   * @defaultValue "horizontal"
+   * @default "horizontal"
    */
   orientation?: "horizontal" | "vertical"
   /**
    * Size scale.
    *
-   * @defaultValue "md"
+   * @default "md"
    */
   size?: "xs" | "sm" | "md" | "lg" | "xl"
   /**
@@ -51,26 +51,26 @@ export interface TabsProps<T extends TabItem = TabItem> {
   /**
    * Whether to render content panels automatically. Set to false for tab bar only.
    *
-   * @defaultValue true
+   * @default true
    */
   content?: boolean
   /**
    * Unmount hidden tab panels from DOM. Defaults to true. If false, panel is hidden via
    * CSS/attribute.
    *
-   * @defaultValue true
+   * @default true
    */
   unmountOnHide?: boolean
   /**
    * Property key for value on item object.
    *
-   * @defaultValue "value"
+   * @default "value"
    */
   valueKey?: string
   /**
    * Property key for label on item object.
    *
-   * @defaultValue "label"
+   * @default "label"
    */
   labelKey?: string
   /**

package/src/components/toaster/RLAToaster.astro

@@ -0,0 +1,88 @@
+---
+---
+
+<div id="rla-toaster-container" class="fixed bottom-5 right-5 z-[200] flex flex-col gap-2 max-w-sm w-full pointer-events-none"></div>
+
+<script>
+  import { toasts, removeToast, addToast } from "../../stores/toast"
+
+  function checkPendingToasts() {
+    const stored = sessionStorage.getItem("pending_toast")
+    if (stored) {
+      sessionStorage.removeItem("pending_toast")
+      try {
+        const parsed = JSON.parse(stored)
+        if (parsed && parsed.title) {
+          addToast(parsed)
+        }
+      } catch (err) {}
+    }
+
+    const url = new URL(window.location.href)
+    let toastTitle = url.searchParams.get("toast_title")
+    let toastDesc = url.searchParams.get("toast_desc") ?? undefined
+    let toastVariant = (url.searchParams.get("toast_variant") as any) || "success"
+
+    if (!toastTitle) {
+      if (url.searchParams.has("signed_in")) {
+        toastTitle = "Signed in successfully"
+        toastDesc = "Welcome back!"
+      } else if (url.searchParams.has("new")) {
+        toastTitle = "Account created successfully"
+        toastDesc = "Please sign in to continue."
+      }
+    }
+
+    if (toastTitle) {
+      url.searchParams.delete("toast_title")
+      url.searchParams.delete("toast_desc")
+      url.searchParams.delete("toast_variant")
+      url.searchParams.delete("signed_in")
+      url.searchParams.delete("new")
+      const cleanUrl = url.pathname + (url.search ? url.search : "")
+      window.history.replaceState({}, "", cleanUrl)
+
+      const payload: any = {
+        title: toastTitle,
+        variant: toastVariant
+      }
+      if (toastDesc) payload.description = toastDesc
+
+      addToast(payload)
+    }
+  }
+
+  checkPendingToasts()
+  document.addEventListener("astro:page-load", checkPendingToasts)
+
+  const container = document.getElementById("rla-toaster-container")
+
+  toasts.subscribe((list) => {
+    if (!container) return
+    container.innerHTML = ""
+    list.forEach((t) => {
+      const el = document.createElement("div")
+      const isError = t.variant === "error"
+      const bgClass = isError
+        ? "bg-error-900 text-error-100 border-error-700"
+        : "bg-neutral-900 text-white border-neutral-800 dark:bg-neutral-800"
+      const iconSvg = isError
+        ? `<svg class="size-4 shrink-0 text-error-400 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg>`
+        : `<svg class="size-4 shrink-0 text-success-400 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>`
+
+      el.className = `pointer-events-auto flex items-start gap-3 p-4 rounded-lg border shadow-xl transition-all duration-300 ${bgClass}`
+      el.innerHTML = `
+        ${iconSvg}
+        <div class="flex flex-col gap-0.5 flex-1 min-w-0">
+          <div class="font-semibold text-sm">${t.title}</div>
+          ${t.description ? `<div class="text-xs opacity-90">${t.description}</div>` : ""}
+        </div>
+        <button type="button" class="text-neutral-400 hover:text-white p-0.5 rounded focus:outline-none" aria-label="Close">
+          <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
+        </button>
+      `
+      el.querySelector("button")?.addEventListener("click", () => removeToast(t.id))
+      container.appendChild(el)
+    })
+  })
+</script>

package/src/icons/defaults.ts

@@ -34,7 +34,10 @@ export const DEFAULT_ICONS = {
   sun: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>`,
   uploadCloud: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242M12 12v9M9 15l3-3 3 3"/></svg>`,
   user: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
-  star: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`
+  star: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`,
+  lock: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`,
+  eye: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0z"/><circle cx="12" cy="12" r="3"/></svg>`,
+  eyeOff: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="100%" height="100%"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499A10.75 10.75 0 0 1 2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.225-4.22"/><line x1="2" x2="22" y1="2" y2="22"/></svg>`
 } as const
 
 export type RimelightIcons = Partial<Record<keyof typeof DEFAULT_ICONS, string>> &

package/src/presets/index.ts

@@ -358,10 +358,10 @@ export default definePreset((options?: RimelightPresetOptions) => {
       animation: {
         keyframes: {
           "accordion-down":
-            "{ from { height: 0; } to { height: var(--starwind-accordion-content-height); } }",
+            "from { height: 0; } to { height: var(--starwind-accordion-content-height); }",
           "accordion-up":
-            "{ from { height: var(--starwind-accordion-content-height); } to { height: 0; } }",
-          "marquee": "{ from { transform: translateX(0); } to { transform: translateX(-100%); } }"
+            "from { height: var(--starwind-accordion-content-height); } to { height: 0; }",
+          "marquee": "from { transform: translateX(0); } to { transform: translateX(-100%); }"
         },
         durations: {
           "accordion-down": "0.2s",

package/src/stores/toast.ts

@@ -0,0 +1,24 @@
+import { atom } from "nanostores"
+
+export interface ToastItem {
+  id: string
+  title: string
+  description?: string
+  variant?: "success" | "error" | "warning" | "info" | "default"
+}
+
+export const toasts = atom<ToastItem[]>([])
+
+export function addToast(toast: Omit<ToastItem, "id">) {
+  const id = Math.random().toString(36).slice(2, 9)
+  const item: ToastItem = { id, ...toast }
+  toasts.set([...toasts.get(), item])
+
+  setTimeout(() => {
+    removeToast(id)
+  }, 4500)
+}
+
+export function removeToast(id: string) {
+  toasts.set(toasts.get().filter((t) => t.id !== id))
+}