@cognitiv/components-web 1.0.4 → 1.1.0

package/dist/components/toast/styles.d.ts

@@ -0,0 +1,162 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const toastVariants: import("tailwind-variants").TVReturnType<{
+    placement: {
+        bottom: {
+            region: string;
+            toast: string;
+        };
+        "bottom end": {
+            region: string;
+            toast: string;
+        };
+        "bottom start": {
+            region: string;
+            toast: string;
+        };
+        top: {
+            region: string;
+            toast: string;
+        };
+        "top end": {
+            region: string;
+            toast: string;
+        };
+        "top start": {
+            region: string;
+            toast: string;
+        };
+    };
+    variant: {
+        accent: {
+            toast: string;
+        };
+        danger: {
+            toast: string;
+        };
+        default: {
+            toast: string;
+        };
+        success: {
+            toast: string;
+        };
+        warning: {
+            toast: string;
+        };
+    };
+}, {
+    action: string;
+    close: string;
+    content: string;
+    description: string;
+    indicator: string;
+    region: string;
+    title: string;
+    toast: string;
+}, undefined, {
+    placement: {
+        bottom: {
+            region: string;
+            toast: string;
+        };
+        "bottom end": {
+            region: string;
+            toast: string;
+        };
+        "bottom start": {
+            region: string;
+            toast: string;
+        };
+        top: {
+            region: string;
+            toast: string;
+        };
+        "top end": {
+            region: string;
+            toast: string;
+        };
+        "top start": {
+            region: string;
+            toast: string;
+        };
+    };
+    variant: {
+        accent: {
+            toast: string;
+        };
+        danger: {
+            toast: string;
+        };
+        default: {
+            toast: string;
+        };
+        success: {
+            toast: string;
+        };
+        warning: {
+            toast: string;
+        };
+    };
+}, {
+    action: string;
+    close: string;
+    content: string;
+    description: string;
+    indicator: string;
+    region: string;
+    title: string;
+    toast: string;
+}, import("tailwind-variants").TVReturnType<{
+    placement: {
+        bottom: {
+            region: string;
+            toast: string;
+        };
+        "bottom end": {
+            region: string;
+            toast: string;
+        };
+        "bottom start": {
+            region: string;
+            toast: string;
+        };
+        top: {
+            region: string;
+            toast: string;
+        };
+        "top end": {
+            region: string;
+            toast: string;
+        };
+        "top start": {
+            region: string;
+            toast: string;
+        };
+    };
+    variant: {
+        accent: {
+            toast: string;
+        };
+        danger: {
+            toast: string;
+        };
+        default: {
+            toast: string;
+        };
+        success: {
+            toast: string;
+        };
+        warning: {
+            toast: string;
+        };
+    };
+}, {
+    action: string;
+    close: string;
+    content: string;
+    description: string;
+    indicator: string;
+    region: string;
+    title: string;
+    toast: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ToastVariants = VariantProps<typeof toastVariants>;

package/dist/components/toast/styles.js

@@ -0,0 +1,66 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const toastVariants = tv({
+  defaultVariants: {
+    placement: "bottom",
+    variant: "default"
+  },
+  slots: {
+    action: "toast__action",
+    close: "toast__close-button",
+    content: "toast__content",
+    description: "toast__description",
+    indicator: "toast__indicator",
+    region: "toast-region",
+    title: "toast__title",
+    toast: "toast"
+  },
+  variants: {
+    placement: {
+      bottom: {
+        region: "toast-region--bottom",
+        toast: "toast--bottom"
+      },
+      "bottom end": {
+        region: "toast-region--bottom-end",
+        toast: "toast--bottom-end"
+      },
+      "bottom start": {
+        region: "toast-region--bottom-start",
+        toast: "toast--bottom-start"
+      },
+      top: {
+        region: "toast-region--top",
+        toast: "toast--top"
+      },
+      "top end": {
+        region: "toast-region--top-end",
+        toast: "toast--top-end"
+      },
+      "top start": {
+        region: "toast-region--top-start",
+        toast: "toast--top-start"
+      }
+    },
+    variant: {
+      accent: {
+        toast: "toast--accent"
+      },
+      danger: {
+        toast: "toast--danger"
+      },
+      default: {
+        toast: "toast--default"
+      },
+      success: {
+        toast: "toast--success"
+      },
+      warning: {
+        toast: "toast--warning"
+      }
+    }
+  }
+});
+
+export { toastVariants };

package/dist/components/toast/toast-queue.d.ts

@@ -0,0 +1,70 @@
+import type { ButtonProps } from "../button";
+import type { ReactNode } from "react";
+import type { ToastOptions as RACToastOptions, UNSTABLE_ToastQueue as ToastQueuePrimitiveType } from "react-aria-components";
+export interface ToastQueueOptions {
+    /** The maximum number of toasts to display at a time (visual only). */
+    maxVisibleToasts?: number;
+    /** Function to wrap updates in (i.e. document.startViewTransition()). */
+    wrapUpdate?: (fn: () => void) => void;
+}
+export declare class ToastQueue<T extends object = ToastContentValue> {
+    private queue;
+    readonly maxVisibleToasts?: number;
+    constructor(options?: ToastQueueOptions);
+    add(content: T, options?: RACToastOptions): string;
+    close(key: string): void;
+    pauseAll(): void;
+    resumeAll(): void;
+    clear(): void;
+    subscribe(fn: () => void): () => void;
+    get visibleToasts(): import("react-stately").QueuedToast<T>[];
+    getQueue(): ToastQueuePrimitiveType<T>;
+}
+export interface ToastContentValue {
+    indicator?: ReactNode | undefined;
+    title?: ReactNode | undefined;
+    description?: ReactNode | undefined;
+    variant?: "default" | "accent" | "success" | "warning" | "danger" | undefined;
+    actionProps?: ButtonProps | undefined;
+    isLoading?: boolean | undefined;
+}
+export interface CognitivToastOptions {
+    description?: ReactNode;
+    indicator?: ReactNode;
+    variant?: ToastContentValue["variant"];
+    actionProps?: ButtonProps;
+    isLoading?: boolean;
+    timeout?: number;
+    onClose?: () => void;
+}
+export interface ToastPromiseOptions<T = unknown> {
+    loading: ReactNode;
+    success: ((data: T) => ReactNode) | ReactNode;
+    error: ((error: Error) => ReactNode) | ReactNode;
+}
+declare const toastQueue: ToastQueue<ToastContentValue>;
+export declare const toast: {
+    (message: ReactNode, options?: CognitivToastOptions): string;
+    success(message: ReactNode, options?: Omit<CognitivToastOptions, "variant">): string;
+    danger(message: ReactNode, options?: Omit<CognitivToastOptions, "variant">): string;
+    info(message: ReactNode, options?: Omit<CognitivToastOptions, "variant">): string;
+    warning(message: ReactNode, options?: Omit<CognitivToastOptions, "variant">): string;
+    promise<T>(promise: Promise<T> | (() => Promise<T>), options: ToastPromiseOptions<T>): string;
+    getQueue(): ToastQueuePrimitiveType<ToastContentValue>;
+    close(key: string): void;
+    pauseAll(): void;
+    resumeAll(): void;
+    clear(): void;
+} & {
+    success: (message: ReactNode, options?: Omit<CognitivToastOptions, "variant">) => string;
+    danger: (message: ReactNode, options?: Omit<CognitivToastOptions, "variant">) => string;
+    info: (message: ReactNode, options?: Omit<CognitivToastOptions, "variant">) => string;
+    warning: (message: ReactNode, options?: Omit<CognitivToastOptions, "variant">) => string;
+    promise: <T>(promise: Promise<T> | (() => Promise<T>), options: ToastPromiseOptions<T>) => string;
+    getQueue: () => ReturnType<() => ToastQueuePrimitiveType<ToastContentValue>>;
+    close: (key: string) => void;
+    pauseAll: () => void;
+    resumeAll: () => void;
+    clear: () => void;
+};
+export { toastQueue };

package/dist/components/toast/toast-queue.js

@@ -0,0 +1,147 @@
+"use strict";
+import { UNSTABLE_ToastQueue } from 'react-aria-components';
+import { flushSync } from 'react-dom';
+import { DEFAULT_RAC_MAX_VISIBLE_TOAST, DEFAULT_TOAST_TIMEOUT } from './constants.js';
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Queue Options
+ * --------------------------------------------------------------------------------------------- */
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Queue
+ * --------------------------------------------------------------------------------------------- */
+class ToastQueue {
+  constructor(options) {
+    this.maxVisibleToasts = options?.maxVisibleToasts;
+    this.queue = new UNSTABLE_ToastQueue({
+      maxVisibleToasts: DEFAULT_RAC_MAX_VISIBLE_TOAST,
+      wrapUpdate: options?.wrapUpdate ? options.wrapUpdate : fn => {
+        if ("startViewTransition" in document) {
+          document.startViewTransition(() => {
+            flushSync(fn);
+          });
+        } else {
+          fn();
+        }
+      }
+    });
+  }
+  add(content, options) {
+    // Apply default timeout if not provided, but respect explicit 0 (persistent toast)
+    const timeout = options?.timeout !== undefined ? options.timeout : DEFAULT_TOAST_TIMEOUT;
+    return this.queue.add(content, {
+      ...options,
+      timeout
+    });
+  }
+  close(key) {
+    this.queue.close(key);
+  }
+  pauseAll() {
+    this.queue.pauseAll();
+  }
+  resumeAll() {
+    this.queue.resumeAll();
+  }
+  clear() {
+    this.queue.clear();
+  }
+  subscribe(fn) {
+    return this.queue.subscribe(fn);
+  }
+  get visibleToasts() {
+    return this.queue.visibleToasts;
+  }
+  getQueue() {
+    return this.queue;
+  }
+}
+
+/* ------------------------------------------------------------------------------------------------
+ * Toast Queue Instance
+ * --------------------------------------------------------------------------------------------- */
+
+// Helper function to create toast
+function createToastFunction(queue) {
+  const toastFn = (message, options) => {
+    // Use default timeout if not provided, but respect explicit 0 (persistent toast)
+    const timeout = options?.timeout !== undefined ? options.timeout : DEFAULT_TOAST_TIMEOUT;
+    return queue.add({
+      actionProps: options?.actionProps,
+      description: options?.description,
+      indicator: options?.indicator,
+      isLoading: options?.isLoading,
+      title: message,
+      variant: options?.variant || "default"
+    }, {
+      onClose: () => {
+        requestAnimationFrame(() => {
+          options?.onClose?.();
+        });
+      },
+      timeout
+    });
+  };
+
+  // Variant methods
+  toastFn.success = (message, options) => {
+    return toastFn(message, {
+      ...options,
+      variant: "success"
+    });
+  };
+  toastFn.danger = (message, options) => {
+    return toastFn(message, {
+      ...options,
+      variant: "danger"
+    });
+  };
+  toastFn.info = (message, options) => {
+    return toastFn(message, {
+      ...options,
+      variant: "accent"
+    });
+  };
+  toastFn.warning = (message, options) => {
+    return toastFn(message, {
+      ...options,
+      variant: "warning"
+    });
+  };
+
+  // Promise support
+  toastFn.promise = (promise, options) => {
+    const promiseFn = typeof promise === "function" ? promise() : promise;
+    const loadingId = queue.add({
+      isLoading: true,
+      title: options.loading,
+      variant: "default"
+    }, {
+      timeout: 0 // Don't auto-close loading toasts
+    });
+    promiseFn.then(data => {
+      const successMessage = typeof options.success === "function" ? options.success(data) : options.success;
+      queue.close(loadingId);
+      return toastFn.success(successMessage);
+    }).catch(error => {
+      const errorMessage = typeof options.error === "function" ? options.error(error) : options.error;
+      queue.close(loadingId);
+      return toastFn.danger(errorMessage);
+    });
+    return loadingId;
+  };
+
+  // Expose queue methods for advanced usage
+  toastFn.getQueue = () => queue.getQueue();
+  toastFn.close = key => queue.close(key);
+  toastFn.pauseAll = () => queue.pauseAll();
+  toastFn.resumeAll = () => queue.resumeAll();
+  toastFn.clear = () => queue.clear();
+  return toastFn;
+}
+const toastQueue = new ToastQueue({
+  maxVisibleToasts: DEFAULT_RAC_MAX_VISIBLE_TOAST
+});
+const toast = createToastFunction(toastQueue);
+
+export { ToastQueue, toast, toastQueue };

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,69 @@
+import type { ToastVariants } from "./styles";
+import type { ToastContentValue } from "./toast-queue";
+import type { ComponentPropsWithRef } from "react";
+import type { ToastProps as ToastPrimitiveProps } from "react-aria-components";
+import { Text as TextPrimitive, UNSTABLE_ToastContent as ToastContentPrimitive, UNSTABLE_ToastRegion as ToastRegionPrimitive } from "react-aria-components";
+import { Button } from "../button";
+import { CloseButton } from "../close-button";
+import { ToastQueue } from "./toast-queue";
+interface ToastProps<T extends object = ToastContentValue> extends ToastPrimitiveProps<T>, ToastVariants {
+    scaleFactor?: number;
+}
+declare const Toast: {
+    <T extends object = ToastContentValue>({ children, className, placement, scaleFactor, toast, variant, ...rest }: ToastProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToastContentProps extends ComponentPropsWithRef<typeof ToastContentPrimitive> {
+}
+declare const ToastContent: ({ children, className, ...rest }: ToastContentProps) => import("react/jsx-runtime").JSX.Element;
+interface ToastIndicatorProps extends ComponentPropsWithRef<"div"> {
+    variant?: ToastVariants["variant"];
+}
+declare const ToastIndicator: {
+    ({ children, className, variant, ...rest }: ToastIndicatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToastTitleProps extends ComponentPropsWithRef<typeof TextPrimitive> {
+}
+declare const ToastTitle: {
+    ({ children, className, ...rest }: ToastTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToastDescriptionProps extends ComponentPropsWithRef<typeof TextPrimitive> {
+}
+declare const ToastDescription: {
+    ({ children, className, ...rest }: ToastDescriptionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToastCloseButtonProps extends ComponentPropsWithRef<typeof CloseButton> {
+}
+declare const ToastCloseButton: {
+    ({ className, ...rest }: ToastCloseButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ToastActionButtonProps extends ComponentPropsWithRef<typeof Button> {
+}
+declare const ToastActionButton: {
+    ({ children, className, ...rest }: ToastActionButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type ToastRegionPrimitiveProps<T extends object = ToastContentValue> = ComponentPropsWithRef<typeof ToastRegionPrimitive<T>>;
+interface ToastProviderProps<T extends object = ToastContentValue> extends Omit<ToastRegionPrimitiveProps<T>, "queue" | "children"> {
+    children?: ToastRegionPrimitiveProps<T>["children"];
+    /** The gap between toasts. @default 8 */
+    gap?: number;
+    /** The maximum number of toasts to display at a time (visual only). */
+    maxVisibleToasts?: number;
+    /** The scale factor for toasts. @default 0.05 */
+    scaleFactor?: number;
+    placement?: ToastVariants["placement"];
+    queue?: ToastQueue<T>;
+    /** The width of the toast. @default 460 */
+    width?: number | string;
+}
+declare const ToastProvider: {
+    <T extends object = ToastContentValue>({ children, className, gap, maxVisibleToasts, placement, queue: queueProp, scaleFactor, width, ...rest }: ToastProviderProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { ToastQueue, Toast, ToastActionButton, ToastCloseButton, ToastContent, ToastDescription, ToastIndicator, ToastProvider, ToastTitle, };
+export type { ToastActionButtonProps, ToastCloseButtonProps, ToastContentProps, ToastDescriptionProps, ToastIndicatorProps, ToastProps, ToastProviderProps, ToastTitleProps, };