@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/Toast/index.js

@@ -1,60 +1,739 @@
+"use client";
 'use strict';
 
-var chunkR7XUIV25_js = require('../../chunk-R7XUIV25.js');
-require('../../chunk-3YOY2VJ6.js');
-require('../../chunk-Y3GT7ETK.js');
-require('../../chunk-B5Q4UPL6.js');
-require('../../chunk-VIREG536.js');
+var react = require('react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var reactAriaComponents = require('react-aria-components');
+var jsxRuntime = require('react/jsx-runtime');
+var zod = require('zod');
 
-
-
-Object.defineProperty(exports, "DismissReasonSchema", {
-  enumerable: true,
-  get: function () { return chunkR7XUIV25_js.DismissReasonSchema; }
-});
-Object.defineProperty(exports, "ToastOptionsSchema", {
-  enumerable: true,
-  get: function () { return chunkR7XUIV25_js.ToastOptionsSchema; }
-});
-Object.defineProperty(exports, "ToastProvider", {
-  enumerable: true,
-  get: function () { return chunkR7XUIV25_js.ToastProvider; }
+// src/elements/Toast/Toast.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var PRESSED_STYLES = "data-[pressed]:scale-[0.97]";
+var HOVER_STYLES = "data-[hovered]:shadow-md";
+var HIGH_CONTRAST_HOVER = "hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground";
+var HIGH_CONTRAST_PRESSED = "hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";
+var ButtonGroupContext = react.createContext(null);
+ButtonGroupContext.displayName = "ButtonGroupContext";
+function useButtonGroupContext() {
+  return react.useContext(ButtonGroupContext);
+}
+var ButtonGroupItemContext = react.createContext(null);
+ButtonGroupItemContext.displayName = "ButtonGroupItemContext";
+function useButtonGroupItemContext() {
+  return react.useContext(ButtonGroupItemContext);
+}
+classVarianceAuthority.cva("inline-flex items-center gap-0", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row",
+      vertical: "flex-col w-full"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
 });
-Object.defineProperty(exports, "ToastProviderPropsSchema", {
-  enumerable: true,
-  get: function () { return chunkR7XUIV25_js.ToastProviderPropsSchema; }
+var buttonGroupItemVariants = classVarianceAuthority.cva("", {
+  variants: {
+    orientation: {
+      // min-w-[44px] ensures visual layer fills touch target width (for icon buttons)
+      horizontal: "min-w-[44px]",
+      // flex (overrides inline-flex) + min-h-[44px] makes visual layer fill touch target,
+      // eliminating gaps between stacked buttons in vertical orientation
+      vertical: "flex min-h-[44px]"
+    },
+    position: {
+      first: "",
+      middle: "",
+      last: "",
+      only: ""
+      // Single button - no modifications needed
+    }
+  },
+  compoundVariants: [
+    // ==========================================================================
+    // Horizontal Orientation
+    // ==========================================================================
+    {
+      orientation: "horizontal",
+      position: "first",
+      className: "rounded-r-none border-r-0"
+    },
+    {
+      orientation: "horizontal",
+      position: "middle",
+      className: "rounded-none border-r-0"
+    },
+    {
+      orientation: "horizontal",
+      position: "last",
+      className: "rounded-l-none"
+    },
+    // ==========================================================================
+    // Vertical Orientation
+    // Note: w-full is handled by Button's effectiveFullWidth for both layers
+    // ==========================================================================
+    {
+      orientation: "vertical",
+      position: "first",
+      className: "rounded-b-none border-b-0"
+    },
+    {
+      orientation: "vertical",
+      position: "middle",
+      className: "rounded-none border-b-0"
+    },
+    {
+      orientation: "vertical",
+      position: "last",
+      className: "rounded-t-none"
+    }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    position: "only"
+  }
 });
-Object.defineProperty(exports, "ToastVariantSchema", {
-  enumerable: true,
-  get: function () { return chunkR7XUIV25_js.ToastVariantSchema; }
+classVarianceAuthority.cva("bg-[var(--border)]", {
+  variants: {
+    orientation: {
+      horizontal: "w-px h-6 mx-1",
+      vertical: "h-px w-full my-1"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
 });
-Object.defineProperty(exports, "Toaster", {
-  enumerable: true,
-  get: function () { return chunkR7XUIV25_js.Toaster; }
+var buttonOuterVariants = classVarianceAuthority.cva(
+  "inline-flex justify-center min-h-[44px] min-w-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      },
+      inVerticalGroup: {
+        true: "items-stretch",
+        false: "items-center"
+      }
+    },
+    defaultVariants: {
+      fullWidth: false,
+      inVerticalGroup: false
+    }
+  }
+);
+var buttonVisualVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 relative cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--primary-action)] text-[var(--primary-action-foreground)] shadow-md hover:bg-[var(--primary-action-hover)] data-[pressed]:bg-[var(--primary-action)]/80",
+        destructive: "bg-[var(--destructive-background)] text-[var(--destructive-foreground)] shadow-md hover:bg-[var(--destructive-background)]/90 data-[pressed]:bg-[var(--destructive-background)]/80",
+        outline: "border border-[var(--input-border)] bg-[var(--page-background)] hover:bg-[var(--input-border)] data-[pressed]:bg-[var(--input-border)]",
+        secondary: "bg-[var(--secondary)] text-[var(--secondary-foreground)] shadow-md hover:bg-[var(--secondary)]/80 data-[pressed]:bg-[var(--secondary)]/70",
+        ghost: "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] data-[pressed]:bg-[var(--accent)]",
+        link: "text-[var(--text-link)] underline-offset-4 hover:underline data-[pressed]:text-[var(--text-link-hover)]"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      },
+      visualSize: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3 text-xs",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+        dot: "h-5 w-5 rounded-full p-0 min-h-0 min-w-0"
+      },
+      paywall: {
+        true: "!bg-[var(--paywall)] !text-[var(--paywall-foreground)] !shadow-md hover:!bg-[var(--paywall)]/90 !cursor-not-allowed !border-transparent",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      visualSize: "default",
+      paywall: false
+    }
+  }
+);
+var Button = react.memo(react.forwardRef(
+  ({
+    className,
+    buttonVisualClassName,
+    variant,
+    size,
+    visualSize,
+    fullWidth,
+    loading = false,
+    loadingText = "Loading...",
+    shortcut,
+    children,
+    isDisabled,
+    paywall = false,
+    paywallRedirect,
+    paywallDescription,
+    onPress,
+    ...props
+  }, ref) => {
+    const paywallDescriptionId = react.useId();
+    const groupContext = useButtonGroupContext();
+    const itemContext = useButtonGroupItemContext();
+    const effectiveVariant = variant ?? groupContext?.variant ?? "default";
+    const effectiveSize = size ?? groupContext?.size;
+    const effectiveIsDisabled = isDisabled ?? groupContext?.isDisabled ?? false;
+    const isInVerticalGroup = groupContext?.orientation === "vertical";
+    const effectiveFullWidth = fullWidth || isInVerticalGroup;
+    const positionClassName = itemContext ? buttonGroupItemVariants({
+      orientation: groupContext?.orientation ?? "horizontal",
+      position: itemContext.position
+    }) : "";
+    const effectiveVisualSize = visualSize ?? effectiveSize ?? "default";
+    if (process.env.NODE_ENV !== "production") {
+      if ((effectiveVisualSize === "dot" || effectiveVisualSize === "icon") && !props["aria-label"] && !children) {
+        console.warn(
+          '[Button] visualSize="dot" or "icon" requires aria-label when no visible text is provided (WCAG 1.1.1)'
+        );
+      }
+    }
+    const handlePress = (e) => {
+      if (paywall) {
+        if (paywallRedirect) {
+          window.open(paywallRedirect, "_blank", "noopener,noreferrer");
+        }
+        return;
+      }
+      onPress?.(e);
+    };
+    const computedIsDisabled = effectiveIsDisabled || loading || void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Button,
+      {
+        ref,
+        isDisabled: computedIsDisabled,
+        "aria-disabled": paywall ? true : void 0,
+        "aria-describedby": paywall ? paywallDescriptionId : void 0,
+        onPress: handlePress,
+        className: cn(buttonOuterVariants({ fullWidth: effectiveFullWidth, inVerticalGroup: isInVerticalGroup }), className),
+        ...props,
+        children: (renderProps) => (
+          /* Layer 2: Visual Button */
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn(
+                buttonVisualVariants({
+                  variant: effectiveVariant,
+                  visualSize: effectiveVisualSize,
+                  paywall,
+                  fullWidth: effectiveFullWidth
+                }),
+                // Position styling from ButtonGroup context (border-radius adjustments)
+                positionClassName,
+                buttonVisualClassName,
+                // Layer 2 interaction styles (no focus - focus ring is on Layer 1)
+                PRESSED_STYLES,
+                HOVER_STYLES,
+                HIGH_CONTRAST_HOVER,
+                HIGH_CONTRAST_PRESSED
+              ),
+              "data-pressed": renderProps.isPressed || void 0,
+              children: [
+                loading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "motion-safe:animate-spin", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite", children: loadingText })
+                ] }),
+                !loading && children,
+                paywall && /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.Zap,
+                  {
+                    "data-testid": "zap-icon",
+                    "aria-hidden": "true",
+                    className: "ml-1"
+                  }
+                ),
+                paywall && /* @__PURE__ */ jsxRuntime.jsxs("span", { id: paywallDescriptionId, className: "sr-only", children: [
+                  "Premium feature: ",
+                  paywallDescription || "Upgrade required to access this feature"
+                ] }),
+                renderProps.isFocusVisible && shortcut && /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "ml-auto hidden text-xs opacity-60 lg:inline", children: shortcut }),
+                renderProps.isPressed && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "absolute inset-0 rounded-[inherit] bg-current opacity-10 motion-safe:animate-in motion-safe:zoom-in-95",
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          )
+        )
+      }
+    );
+  }
+));
+Button.displayName = "Button";
+var DismissReasonSchema = zod.z.enum(["timeout", "user", "programmatic"]);
+var ToastVariantSchema = zod.z.enum([
+  "default",
+  "primary",
+  "destructive",
+  "accent"
+]);
+var ToasterPositionSchema = zod.z.enum([
+  "top-left",
+  "top-center",
+  "top-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right"
+]);
+var ToastOptionsSchema = zod.z.object({
+  /**
+   * Visual variant determining background and foreground colors
+   * @default 'default'
+   */
+  variant: ToastVariantSchema.default("default"),
+  /**
+   * Auto-dismiss timeout in milliseconds
+   * - Values 1-4999ms are clamped to 5000ms (WCAG 2.2 timing requirement)
+   * - Set to 0 for persistent toasts (no auto-dismiss)
+   * @default 5000
+   */
+  timeout: zod.z.number().min(0).default(5e3),
+  /**
+   * Callback fired when toast is dismissed
+   * @param key - Unique identifier of the toast
+   * @param reason - Why the toast was dismissed ('timeout' | 'user' | 'programmatic')
+   */
+  onClose: zod.z.function().optional()
 });
-Object.defineProperty(exports, "ToasterPositionSchema", {
-  enumerable: true,
-  get: function () { return chunkR7XUIV25_js.ToasterPositionSchema; }
+var ToastProviderPropsSchema = zod.z.object({
+  /**
+   * Maximum number of toasts visible at once
+   * Additional toasts are queued and shown as others dismiss
+   * @default 3
+   */
+  maxVisibleToasts: zod.z.number().min(1).default(3)
 });
-Object.defineProperty(exports, "ToasterPropsSchema", {
-  enumerable: true,
-  get: function () { return chunkR7XUIV25_js.ToasterPropsSchema; }
+var ToasterPropsSchema = zod.z.object({
+  /**
+   * Position of the toast region on screen
+   * @default 'bottom-right'
+   */
+  position: ToasterPositionSchema.default("bottom-right"),
+  /**
+   * Accessible label for the toast region landmark
+   * Used by screen readers to identify the notification area
+   * @default 'Notifications'
+   */
+  "aria-label": zod.z.string().default("Notifications"),
+  /**
+   * Additional CSS classes for the toast region
+   */
+  className: zod.z.string().optional()
 });
-Object.defineProperty(exports, "toast", {
-  enumerable: true,
-  get: function () { return chunkR7XUIV25_js.toast; }
-});
-Object.defineProperty(exports, "toastQueue", {
-  enumerable: true,
-  get: function () { return chunkR7XUIV25_js.toastQueue; }
-});
-Object.defineProperty(exports, "toastVariants", {
-  enumerable: true,
-  get: function () { return chunkR7XUIV25_js.toastVariants; }
-});
-Object.defineProperty(exports, "toasterVariants", {
-  enumerable: true,
-  get: function () { return chunkR7XUIV25_js.toasterVariants; }
+var toastVariants = classVarianceAuthority.cva(
+  [
+    // Fixed width for consistent appearance
+    "pointer-events-auto relative flex w-[356px] items-center justify-between",
+    "space-x-4 overflow-hidden rounded-lg border p-4 pr-12 shadow-lg",
+    // Animations with reduced-motion support
+    "transition-all duration-300",
+    "motion-reduce:transition-none motion-reduce:animate-none",
+    "data-[entering]:animate-in data-[entering]:slide-in-from-left",
+    "data-[exiting]:animate-out data-[exiting]:slide-out-to-right-full",
+    "data-[exiting]:fade-out-80",
+    // Touch interaction for swipe
+    "touch-pan-y"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-[var(--content-background)]",
+          "text-[var(--content-foreground)]",
+          "border-[var(--border)]"
+        ],
+        primary: [
+          "bg-[var(--primary)]",
+          "text-[var(--primary-foreground)]",
+          "border-[var(--primary)]"
+        ],
+        destructive: [
+          "bg-[var(--destructive-background)]",
+          "text-[var(--destructive-foreground)]",
+          "border-[var(--destructive-background)]"
+        ],
+        accent: [
+          "bg-[var(--accent-background)]",
+          "text-[var(--accent-foreground)]",
+          "border-[var(--accent-background)]"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var toasterVariants = classVarianceAuthority.cva(
+  [
+    "fixed z-50 flex flex-col gap-2 p-4",
+    "pointer-events-none",
+    "max-h-screen overflow-hidden"
+  ],
+  {
+    variants: {
+      position: {
+        "top-left": "top-0 left-0 items-start",
+        "top-center": "top-0 left-1/2 -translate-x-1/2 items-center",
+        "top-right": "top-0 right-0 items-end",
+        "bottom-left": "bottom-0 left-0 items-start",
+        "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 items-center",
+        "bottom-right": "bottom-0 right-0 items-end"
+      }
+    },
+    defaultVariants: {
+      position: "bottom-right"
+    }
+  }
+);
+var CloseButton = react.memo(
+  react.forwardRef(
+    ({ variant = "default", className, onPress }, ref) => {
+      const hoverStyles = variant === "default" ? "hover:bg-[var(--accent-background)]/20" : "hover:bg-white/20";
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          ref,
+          variant: "ghost",
+          visualSize: "icon",
+          onPress,
+          className: cn(
+            "absolute right-2 top-2",
+            hoverStyles,
+            className
+          ),
+          "aria-label": "Dismiss notification",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4", "aria-hidden": "true" })
+        }
+      );
+    }
+  )
+);
+CloseButton.displayName = "CloseButton";
+var internalQueue = new reactStately.ToastQueue({
+  maxVisibleToasts: 3
 });
+var totalActiveToasts = 0;
+var toastCountListeners = /* @__PURE__ */ new Set();
+function incrementTotalToasts() {
+  totalActiveToasts++;
+  toastCountListeners.forEach((fn) => fn());
+}
+function decrementTotalToasts() {
+  totalActiveToasts = Math.max(0, totalActiveToasts - 1);
+  toastCountListeners.forEach((fn) => fn());
+}
+function getTotalActiveToasts() {
+  return totalActiveToasts;
+}
+function subscribeToTotalCount(fn) {
+  toastCountListeners.add(fn);
+  return () => toastCountListeners.delete(fn);
+}
+var toastQueue = {
+  /**
+   * Add a toast to the queue
+   */
+  add: (content, options) => internalQueue.add(content, options),
+  /**
+   * Close a specific toast by key
+   */
+  close: (key) => {
+    internalQueue.close(key);
+  },
+  /**
+   * Close all toasts (visible and queued)
+   */
+  closeAll: () => {
+    internalQueue.visibleToasts.forEach((toast2) => {
+      internalQueue.close(toast2.key);
+    });
+  },
+  /**
+   * Pause all toast timers
+   */
+  pauseAll: () => {
+    internalQueue.pauseAll();
+  },
+  /**
+   * Resume all toast timers
+   */
+  resumeAll: () => {
+    internalQueue.resumeAll();
+  },
+  /**
+   * Get the visible toasts
+   */
+  get visibleToasts() {
+    return internalQueue.visibleToasts;
+  },
+  /**
+   * Subscribe to queue changes
+   */
+  subscribe: (fn) => internalQueue.subscribe(fn),
+  /**
+   * Get total active toasts (visible + queued)
+   */
+  get totalCount() {
+    return totalActiveToasts;
+  }
+};
+function getInternalQueue() {
+  return internalQueue;
+}
+function enforceMinTimeout(timeout) {
+  if (timeout === 0) return 0;
+  return Math.max(timeout, 5e3);
+}
+function toast(content, options) {
+  const validated = ToastOptionsSchema.parse(options ?? {});
+  const timeout = enforceMinTimeout(validated.timeout);
+  const dismissReason = "timeout";
+  incrementTotalToasts();
+  const key = toastQueue.add(
+    {
+      key: "",
+      // Will be set by queue
+      content,
+      variant: validated.variant,
+      timeout,
+      onClose: validated.onClose
+    },
+    {
+      timeout,
+      onClose: () => {
+        decrementTotalToasts();
+        if (validated.onClose) {
+          validated.onClose(
+            key,
+            dismissReason
+          );
+        }
+      }
+    }
+  );
+  return key;
+}
+var ToastItem = react.memo(
+  react.forwardRef(({ toast: toast2, state }, forwardedRef) => {
+    const internalRef = react.useRef(null);
+    const ref = forwardedRef || internalRef;
+    const { toastProps, contentProps } = reactAria.useToast(
+      { toast: toast2 },
+      state,
+      ref
+    );
+    const [touchStart, setTouchStart] = react.useState(null);
+    const [translateX, setTranslateX] = react.useState(0);
+    const SWIPE_THRESHOLD = 50;
+    const handleTouchStart = react.useCallback((e) => {
+      const touch = e.touches[0];
+      if (touch) {
+        setTouchStart(touch.clientX);
+      }
+    }, []);
+    const handleTouchMove = react.useCallback(
+      (e) => {
+        if (touchStart === null) return;
+        const touch = e.touches[0];
+        if (!touch) return;
+        const diff = touch.clientX - touchStart;
+        if (diff > 0) {
+          setTranslateX(diff);
+        }
+      },
+      [touchStart]
+    );
+    const handleTouchEnd = react.useCallback(() => {
+      if (translateX > SWIPE_THRESHOLD) {
+        state.close(toast2.key);
+      }
+      setTranslateX(0);
+      setTouchStart(null);
+    }, [translateX, state, toast2.key]);
+    const handleCloseClick = react.useCallback(() => {
+      state.close(toast2.key);
+    }, [state, toast2.key]);
+    const { content } = toast2;
+    const variant = content.variant ?? "default";
+    const accessibleName = typeof content.content === "string" ? content.content : "Notification";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...toastProps,
+        ref,
+        className: cn(toastVariants({ variant })),
+        "aria-label": accessibleName,
+        style: {
+          transform: translateX > 0 ? `translateX(${translateX}px)` : void 0,
+          opacity: translateX > 0 ? 1 - translateX / 200 : void 0
+        },
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ...contentProps, className: "flex-1 min-w-0", children: typeof content.content === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: content.content }) : content.content }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CloseButton,
+            {
+              variant,
+              onPress: handleCloseClick
+            }
+          )
+        ]
+      }
+    );
+  })
+);
+ToastItem.displayName = "ToastItem";
+var ToastContext = react.createContext(null);
+function ToastProvider({
+  children,
+  maxVisibleToasts = 3
+}) {
+  ToastProviderPropsSchema.parse({ maxVisibleToasts });
+  const queue = react.useMemo(() => {
+    return getInternalQueue();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Provider, { value: queue, children });
+}
+ToastProvider.displayName = "ToastProvider";
+function StackedToastIndicator({ queuedCount }) {
+  if (queuedCount <= 0) return null;
+  const stackLayers = Math.min(queuedCount, 2);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-[356px] pointer-events-none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "absolute left-1/2 -translate-x-1/2 w-[340px] h-4 rounded-lg shadow-lg",
+          "bg-[var(--content-background)] border border-[var(--border)]",
+          "opacity-60",
+          "transition-all duration-200"
+        ),
+        style: { top: 0 }
+      }
+    ),
+    stackLayers >= 2 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "absolute left-1/2 -translate-x-1/2 w-[324px] h-2 rounded-b-lg shadow-lg",
+          "bg-[var(--content-background)] border border-t-0 border-[var(--border)]",
+          "opacity-40",
+          "transition-all duration-200"
+        ),
+        style: { top: 14 }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "text-sm text-[var(--content-foreground)] opacity-70 text-center py-2 pointer-events-auto",
+        "aria-live": "polite",
+        children: [
+          "+",
+          queuedCount,
+          " more notification",
+          queuedCount > 1 ? "s" : ""
+        ]
+      }
+    )
+  ] });
+}
+var Toaster = react.memo(
+  react.forwardRef((props, forwardedRef) => {
+    const validated = ToasterPropsSchema.parse(props);
+    const {
+      position = "bottom-right",
+      "aria-label": ariaLabel = "Notifications",
+      className
+    } = validated;
+    const internalRef = react.useRef(null);
+    const ref = forwardedRef || internalRef;
+    const internalQueueRef = getInternalQueue();
+    const state = reactStately.useToastQueue(internalQueueRef);
+    const totalCount = react.useSyncExternalStore(
+      subscribeToTotalCount,
+      getTotalActiveToasts,
+      getTotalActiveToasts
+    );
+    const { regionProps } = reactAria.useToastRegion(
+      { "aria-label": ariaLabel },
+      state,
+      ref
+    );
+    const queuedCount = Math.max(0, totalCount - state.visibleToasts.length);
+    const handleClearAll = react.useCallback(() => {
+      state.visibleToasts.forEach((toast2) => {
+        state.close(toast2.key);
+      });
+    }, [state]);
+    if (state.visibleToasts.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...regionProps,
+        ref,
+        className: cn(toasterVariants({ position }), className),
+        children: [
+          state.visibleToasts.map((toast2) => /* @__PURE__ */ jsxRuntime.jsx(ToastItem, { toast: toast2, state }, toast2.key)),
+          /* @__PURE__ */ jsxRuntime.jsx(StackedToastIndicator, { queuedCount }),
+          state.visibleToasts.length >= 2 && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "secondary",
+              visualSize: "sm",
+              onPress: handleClearAll,
+              "aria-label": "Clear all notifications",
+              className: "mt-2 pointer-events-auto",
+              children: "Clear All"
+            }
+          )
+        ]
+      }
+    );
+  })
+);
+Toaster.displayName = "Toaster";
+
+exports.DismissReasonSchema = DismissReasonSchema;
+exports.ToastOptionsSchema = ToastOptionsSchema;
+exports.ToastProvider = ToastProvider;
+exports.ToastProviderPropsSchema = ToastProviderPropsSchema;
+exports.ToastVariantSchema = ToastVariantSchema;
+exports.Toaster = Toaster;
+exports.ToasterPositionSchema = ToasterPositionSchema;
+exports.ToasterPropsSchema = ToasterPropsSchema;
+exports.toast = toast;
+exports.toastQueue = toastQueue;
+exports.toastVariants = toastVariants;
+exports.toasterVariants = toasterVariants;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map