@choice-ui/react 1.6.7 → 1.6.9

package/dist/components/toast/src/components/toaster-item.js

@@ -0,0 +1,416 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RemoveSmall, LoaderCircle, CircleInfoLargeSolid, CircleWarningLargeSolid, CircleErrorSolid, CircleCheckLargeSolid } from "@choiceform/icons-react";
+import { motion } from "framer-motion";
+import { memo, forwardRef, useId, useRef, useState, useMemo, useEffect } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { dismiss, updateHeight } from "../store.js";
+import { toastRootTv } from "../tv.js";
+import { ToastProgressBar } from "./toast-progress-bar.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+import { mergeRefs } from "../../../../shared/utils/merge-refs/merge-refs.js";
+const GAP = 12;
+const DEFAULT_HEIGHT = 56;
+const SWIPE_THRESHOLD = 56;
+const ANIMATION_CONFIG = {
+  default: {
+    type: "spring",
+    stiffness: 150,
+    damping: 20,
+    mass: 1
+  },
+  opacity: {
+    type: "tween",
+    duration: 0.35,
+    ease: "easeOut"
+  }
+};
+const SuccessIcon = memo(() => /* @__PURE__ */ jsx(CircleCheckLargeSolid, {}));
+SuccessIcon.displayName = "SuccessIcon";
+const ErrorIcon = memo(() => /* @__PURE__ */ jsx(CircleErrorSolid, {}));
+ErrorIcon.displayName = "ErrorIcon";
+const WarningIcon = memo(() => /* @__PURE__ */ jsx(CircleWarningLargeSolid, {}));
+WarningIcon.displayName = "WarningIcon";
+const InfoIcon = memo(() => /* @__PURE__ */ jsx(CircleInfoLargeSolid, {}));
+InfoIcon.displayName = "InfoIcon";
+const LoadingIcon = memo(() => /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }));
+LoadingIcon.displayName = "LoadingIcon";
+const TOAST_ICONS = {
+  success: /* @__PURE__ */ jsx(SuccessIcon, {}),
+  error: /* @__PURE__ */ jsx(ErrorIcon, {}),
+  warning: /* @__PURE__ */ jsx(WarningIcon, {}),
+  info: /* @__PURE__ */ jsx(InfoIcon, {}),
+  loading: /* @__PURE__ */ jsx(LoadingIcon, {}),
+  default: null
+};
+function getToastIcon(type) {
+  return TOAST_ICONS[type] ?? null;
+}
+const ToasterItem = memo(
+  forwardRef(function ToasterItem2({
+    toast,
+    index,
+    total,
+    expanded,
+    position,
+    toasterId,
+    toastHeights,
+    slotProps,
+    showProgress = false,
+    defaultDuration = 5e3,
+    isPaused = false,
+    layout = "default"
+  }, ref) {
+    const titleId = useId();
+    const descriptionId = useId();
+    const rootRef = useRef(null);
+    const [isSwiping, setIsSwiping] = useState(false);
+    const [swipeOffset, setSwipeOffset] = useState({ x: 0, y: 0 });
+    const [swipeDirection, setSwipeDirection] = useState(null);
+    const swipeStartRef = useRef(null);
+    const toastDuration = toast.duration ?? defaultDuration;
+    const shouldShowProgress = showProgress && toastDuration > 0 && toast.type !== "loading";
+    const offsetY = useMemo(() => {
+      if (expanded) {
+        let offset = 0;
+        for (let i = 0; i < index; i++) {
+          offset += (toastHeights[i] ?? DEFAULT_HEIGHT) + GAP;
+        }
+        return offset;
+      }
+      return index * 8;
+    }, [expanded, index, toastHeights]);
+    useEffect(() => {
+      const node = rootRef.current;
+      if (!node) return;
+      let rafId = null;
+      let lastHeight = 0;
+      const measureHeight = () => {
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+        }
+        rafId = requestAnimationFrame(() => {
+          const height = node.offsetHeight;
+          if (height > 0 && height !== lastHeight) {
+            lastHeight = height;
+            updateHeight(toast.id, height, toasterId);
+          }
+          rafId = null;
+        });
+      };
+      measureHeight();
+      const resizeObserver = new ResizeObserver(measureHeight);
+      resizeObserver.observe(node);
+      return () => {
+        resizeObserver.disconnect();
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+        }
+      };
+    }, [toast.id, toasterId]);
+    const close = useEventCallback((_direction) => {
+      dismiss(toast.id, toasterId);
+    });
+    const handleKeyDown = useEventCallback((e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+      }
+    });
+    const handlePointerDown = useEventCallback((e) => {
+      const target = e.target;
+      if (target.closest("button, a, input, [role='button']")) {
+        return;
+      }
+      swipeStartRef.current = { x: e.clientX, y: e.clientY };
+      setSwipeDirection(null);
+      target.setPointerCapture(e.pointerId);
+    });
+    const handlePointerMove = useEventCallback((e) => {
+      if (!swipeStartRef.current) return;
+      const deltaX = e.clientX - swipeStartRef.current.x;
+      const deltaY = e.clientY - swipeStartRef.current.y;
+      const isVerticalPosition = position === "top-center" || position === "bottom-center";
+      if (isVerticalPosition) {
+        const absDeltaY = Math.abs(deltaY);
+        if (!isSwiping && absDeltaY > 10) {
+          setIsSwiping(true);
+        }
+        if (isSwiping) {
+          setSwipeDirection(deltaY > 0 ? "down" : "up");
+          setSwipeOffset({ x: 0, y: deltaY });
+        }
+      } else {
+        const absDeltaX = Math.abs(deltaX);
+        if (!isSwiping && absDeltaX > 10) {
+          setIsSwiping(true);
+        }
+        if (isSwiping) {
+          setSwipeDirection(deltaX > 0 ? "right" : "left");
+          setSwipeOffset({ x: deltaX, y: 0 });
+        }
+      }
+    });
+    const handlePointerUp = useEventCallback((e) => {
+      if (!swipeStartRef.current) return;
+      const target = e.target;
+      target.releasePointerCapture(e.pointerId);
+      const isVerticalPosition = position === "top-center" || position === "bottom-center";
+      const swipeDistance = isVerticalPosition ? Math.abs(swipeOffset.y) : Math.abs(swipeOffset.x);
+      if (swipeDistance > SWIPE_THRESHOLD && swipeDirection) {
+        close(swipeDirection);
+      } else {
+        setSwipeOffset({ x: 0, y: 0 });
+      }
+      swipeStartRef.current = null;
+      setIsSwiping(false);
+    });
+    const handlePointerCancel = useEventCallback((e) => {
+      const target = e.target;
+      target.releasePointerCapture(e.pointerId);
+      swipeStartRef.current = null;
+      setIsSwiping(false);
+      setSwipeOffset({ x: 0, y: 0 });
+      setSwipeDirection(null);
+    });
+    const displayIcon = getToastIcon(toast.type);
+    const isBehind = index > 0 && !expanded;
+    const isTop = position.startsWith("top");
+    const scale = expanded ? 1 : Math.max(0, 1 - index * 0.05);
+    const yPosition = useMemo(() => {
+      const swipeY = swipeOffset.y;
+      if (expanded) {
+        return isTop ? offsetY + swipeY : -offsetY + swipeY;
+      }
+      const peek = 8;
+      const shrink = 1 - scale;
+      const height = toast.height || 0;
+      const peekOffset = index * peek;
+      const shrinkOffset = shrink * height;
+      return isTop ? peekOffset + shrinkOffset + swipeY : -(peekOffset + shrinkOffset) + swipeY;
+    }, [expanded, isTop, offsetY, swipeOffset.y, scale, toast.height, index]);
+    const stackOpacity = useMemo(() => {
+      if (expanded) return 1;
+      return Math.max(0, 1 - index * 0.2);
+    }, [expanded, index]);
+    const enterExitY = isTop ? -100 : 100;
+    const exitAnimation = useMemo(() => {
+      const dir = swipeDirection || toast.swipeDirection;
+      const exitBase = { opacity: 0, zIndex: -1, filter: "blur(4px)" };
+      if (dir === "right") return { ...exitBase, x: "100%" };
+      if (dir === "left") return { ...exitBase, x: "-100%" };
+      if (dir === "up") return { ...exitBase, y: "-100%" };
+      if (dir === "down") return { ...exitBase, y: "100%" };
+      return exitBase;
+    }, [swipeDirection, toast.swipeDirection]);
+    const tv = useMemo(
+      () => toastRootTv({
+        layout,
+        type: toast.type,
+        position,
+        hasActions: !!toast.action || !!toast.cancel,
+        hasDescription: !!(toast.description || toast.descriptionHtml),
+        hasIcon: !!displayIcon,
+        behind: isBehind,
+        expanded,
+        variant: toast.variant
+      }),
+      [
+        layout,
+        toast.type,
+        position,
+        toast.action,
+        toast.cancel,
+        toast.description,
+        toast.descriptionHtml,
+        displayIcon,
+        isBehind,
+        expanded,
+        toast.variant
+      ]
+    );
+    const zIndex = total - index;
+    const compactProgress = layout === "compact" && shouldShowProgress;
+    const combinedStyle = useMemo(() => {
+      const backgroundColorMap = compactProgress ? {
+        default: "var(--color-gray-800)",
+        accent: "var(--color-accent-hover-background)",
+        success: "var(--color-success-hover-background)",
+        warning: "var(--color-warning-hover-background)",
+        error: "var(--color-danger-hover-background)",
+        assistive: "var(--color-assistive-hover-background)"
+      } : {
+        default: "var(--color-menu-background)",
+        accent: "var(--color-accent-background)",
+        success: "var(--color-success-background)",
+        warning: "var(--color-warning-background)",
+        error: "var(--color-danger-background)",
+        assistive: "var(--color-assistive-background)"
+      };
+      const bgColor = backgroundColorMap[toast.variant ?? "default"] ?? "var(--color-menu-background)";
+      return {
+        "--toast-index": index,
+        "--toast-opacity": `${stackOpacity * 100}%`,
+        "--toast-background-color": `color-mix(in srgb, ${bgColor} var(--toast-opacity), var(--color-default-background))`,
+        "--toast-gap": `${GAP}px`,
+        zIndex
+      };
+    }, [index, stackOpacity, zIndex, compactProgress, toast.variant]);
+    const handleActionClick = useEventCallback(() => {
+      var _a;
+      (_a = toast.action) == null ? void 0 : _a.onClick();
+      close();
+    });
+    const handleDismissClick = useEventCallback(() => {
+      close();
+    });
+    const { renderIcon, renderActions } = slotProps;
+    const iconContent = useMemo(() => {
+      if (renderIcon) {
+        return renderIcon(toast.type, displayIcon);
+      }
+      return displayIcon;
+    }, [renderIcon, toast.type, displayIcon]);
+    const titleContent = useMemo(() => {
+      if (!toast.title) return null;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: titleId,
+          className: tcx(tv.title(), slotProps.titleClassName),
+          style: slotProps.titleStyle,
+          children: toast.title
+        }
+      );
+    }, [toast.title, titleId, tv, slotProps.titleClassName, slotProps.titleStyle]);
+    const descriptionContent = useMemo(() => {
+      if (!toast.description && !toast.descriptionHtml) return null;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: descriptionId,
+          className: tcx(tv.description(), slotProps.descriptionClassName),
+          style: slotProps.descriptionStyle,
+          ...toast.descriptionHtml ? { dangerouslySetInnerHTML: { __html: toast.descriptionHtml } } : { children: toast.description }
+        }
+      );
+    }, [
+      toast.description,
+      toast.descriptionHtml,
+      descriptionId,
+      tv,
+      slotProps.descriptionClassName,
+      slotProps.descriptionStyle
+    ]);
+    const actionsContent = useMemo(() => {
+      var _a;
+      if (!toast.action && !toast.cancel) return null;
+      if (renderActions) {
+        return renderActions(toast.action, toast.cancel, close);
+      }
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: tcx(tv.actions(), slotProps.actionsClassName),
+          style: slotProps.actionsStyle,
+          children: [
+            toast.action && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: tv.button({ buttonVariant: "action" }),
+                onClick: handleActionClick,
+                children: toast.action.label
+              }
+            ),
+            toast.cancel && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: tcx(tv.button({ buttonVariant: "cancel" })),
+                onClick: handleDismissClick,
+                children: layout === "default" ? (_a = toast.cancel) == null ? void 0 : _a.label : /* @__PURE__ */ jsx(RemoveSmall, {})
+              }
+            )
+          ]
+        }
+      );
+    }, [
+      renderActions,
+      toast.action,
+      toast.cancel,
+      close,
+      tv,
+      handleActionClick,
+      handleDismissClick,
+      slotProps.actionsClassName,
+      slotProps.actionsStyle
+    ]);
+    const mergedClassName = tcx(tv.root(), slotProps.itemClassName);
+    const mergedStyle = useMemo(() => {
+      if (slotProps.itemStyle) {
+        return { ...combinedStyle, ...slotProps.itemStyle };
+      }
+      return combinedStyle;
+    }, [combinedStyle, slotProps.itemStyle]);
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: mergeRefs(rootRef, ref),
+        initial: { y: enterExitY },
+        animate: {
+          x: swipeOffset.x,
+          y: yPosition,
+          scale,
+          opacity: 1,
+          filter: "blur(0px)"
+        },
+        exit: exitAnimation,
+        transition: isSwiping ? { duration: 0 } : ANIMATION_CONFIG,
+        role: toast.type === "error" || toast.type === "warning" ? "alertdialog" : "status",
+        "aria-modal": "false",
+        "aria-labelledby": toast.title ? titleId : void 0,
+        "aria-describedby": toast.description ? descriptionId : void 0,
+        "aria-live": toast.type === "error" ? "assertive" : "polite",
+        tabIndex: 0,
+        "data-toast-root": true,
+        "data-type": toast.type,
+        className: mergedClassName,
+        style: mergedStyle,
+        onKeyDown: handleKeyDown,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerCancel,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: tv.content(), children: [
+            iconContent && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: tcx(tv.icon(), slotProps.iconClassName),
+                style: slotProps.iconStyle,
+                children: iconContent
+              }
+            ),
+            titleContent,
+            layout === "default" && descriptionContent,
+            shouldShowProgress && /* @__PURE__ */ jsx(
+              ToastProgressBar,
+              {
+                duration: toastDuration,
+                isPaused,
+                tv
+              }
+            )
+          ] }),
+          actionsContent
+        ]
+      }
+    );
+  })
+);
+ToasterItem.displayName = "ToasterItem";
+export {
+  DEFAULT_HEIGHT,
+  GAP,
+  ToasterItem
+};

package/dist/components/toast/src/components/toaster-slots.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { ToastType } from '../types';
+export interface ToastAction {
+    label: ReactNode;
+    onClick: () => void;
+}
+export interface ToastCancel {
+    label: ReactNode;
+    onClick?: () => void;
+}
+/**
+ * Props for Toaster.Item slot component
+ */
+export interface ToasterItemSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+/**
+ * Slot component for customizing toast item container
+ */
+export declare const ToasterItemSlot: import('react').ForwardRefExoticComponent<ToasterItemSlotProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Toaster.Icon slot component
+ */
+export interface ToasterIconSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+    /** Custom render function - receives type and default icon */
+    children?: (type: ToastType, defaultIcon: ReactNode) => ReactNode;
+}
+/**
+ * Slot component for customizing toast icon
+ */
+export declare const ToasterIconSlot: import('react').ForwardRefExoticComponent<ToasterIconSlotProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Toaster.Title slot component
+ */
+export interface ToasterTitleSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Slot component for customizing toast title
+ */
+export declare const ToasterTitleSlot: import('react').ForwardRefExoticComponent<ToasterTitleSlotProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Toaster.Description slot component
+ */
+export interface ToasterDescriptionSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Slot component for customizing toast description
+ */
+export declare const ToasterDescriptionSlot: import('react').ForwardRefExoticComponent<ToasterDescriptionSlotProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Toaster.Actions slot component
+ */
+export interface ToasterActionsSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+    /** Custom render function for actions */
+    children?: (action: ToastAction | undefined, cancel: ToastCancel | undefined, close: () => void) => ReactNode;
+}
+/**
+ * Slot component for customizing toast actions
+ */
+export declare const ToasterActionsSlot: import('react').ForwardRefExoticComponent<ToasterActionsSlotProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Collected slot props from Toaster.Item children
+ */
+export interface CollectedSlotProps {
+    itemClassName?: string;
+    itemStyle?: React.CSSProperties;
+    iconClassName?: string;
+    iconStyle?: React.CSSProperties;
+    renderIcon?: (type: ToastType, defaultIcon: ReactNode) => ReactNode;
+    titleClassName?: string;
+    titleStyle?: React.CSSProperties;
+    descriptionClassName?: string;
+    descriptionStyle?: React.CSSProperties;
+    actionsClassName?: string;
+    actionsStyle?: React.CSSProperties;
+    renderActions?: (action: ToastAction | undefined, cancel: ToastCancel | undefined, close: () => void) => ReactNode;
+}

package/dist/components/toast/src/components/toaster-slots.js

@@ -0,0 +1,38 @@
+import { forwardRef } from "react";
+const ToasterItemSlot = forwardRef(
+  function ToasterItemSlot2(_props, _ref) {
+    return null;
+  }
+);
+ToasterItemSlot.displayName = "Toaster.Item";
+const ToasterIconSlot = forwardRef(
+  function ToasterIconSlot2(_props, _ref) {
+    return null;
+  }
+);
+ToasterIconSlot.displayName = "Toaster.Icon";
+const ToasterTitleSlot = forwardRef(
+  function ToasterTitleSlot2(_props, _ref) {
+    return null;
+  }
+);
+ToasterTitleSlot.displayName = "Toaster.Title";
+const ToasterDescriptionSlot = forwardRef(
+  function ToasterDescriptionSlot2(_props, _ref) {
+    return null;
+  }
+);
+ToasterDescriptionSlot.displayName = "Toaster.Description";
+const ToasterActionsSlot = forwardRef(
+  function ToasterActionsSlot2(_props, _ref) {
+    return null;
+  }
+);
+ToasterActionsSlot.displayName = "Toaster.Actions";
+export {
+  ToasterActionsSlot,
+  ToasterDescriptionSlot,
+  ToasterIconSlot,
+  ToasterItemSlot,
+  ToasterTitleSlot
+};

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

@@ -0,0 +1,5 @@
+export { Toaster } from './toaster';
+export type { ToasterProps } from './toaster';
+export { toast } from './store';
+export type { ToastOptions, ToastData } from './store';
+export type { ToastType, ToastVariant, ToastPosition } from './types';

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

@@ -0,0 +1,101 @@
+import { ToastPosition, ToastType, ToastVariant } from './types';
+export interface ToastData {
+    id: string;
+    type: ToastType;
+    variant?: ToastVariant;
+    title?: React.ReactNode;
+    /** HTML string for title - rendered with dangerouslySetInnerHTML */
+    titleHtml?: string;
+    description?: React.ReactNode;
+    /** HTML string for description - rendered with dangerouslySetInnerHTML */
+    descriptionHtml?: string;
+    duration?: number;
+    icon?: React.ReactNode;
+    action?: {
+        label: React.ReactNode;
+        onClick: () => void;
+    };
+    cancel?: {
+        label: React.ReactNode;
+        onClick?: () => void;
+    };
+    onClose?: () => void;
+    onAutoClose?: () => void;
+    dismissible?: boolean;
+    createdAt: number;
+    height?: number;
+    removing?: boolean;
+    swipeDirection?: "left" | "right" | "up" | "down";
+}
+export interface ToastOptions {
+    id?: string;
+    variant?: ToastVariant;
+    description?: React.ReactNode;
+    /** HTML string for description - rendered with dangerouslySetInnerHTML */
+    descriptionHtml?: string;
+    duration?: number;
+    icon?: React.ReactNode;
+    action?: {
+        label: React.ReactNode;
+        onClick: () => void;
+    };
+    cancel?: {
+        label: React.ReactNode;
+        onClick?: () => void;
+    };
+    onClose?: () => void;
+    onAutoClose?: () => void;
+    dismissible?: boolean;
+}
+export interface ToasterState {
+    toasts: ToastData[];
+    expanded: boolean;
+    position: ToastPosition;
+}
+type Subscriber = (state?: ToasterState) => void;
+export declare function subscribe(callback: Subscriber, toasterId?: string): () => void;
+export declare function getSnapshot(toasterId?: string): ToasterState;
+export declare function setToasterConfig(config: Partial<Pick<ToasterState, "position" | "expanded">>, toasterId?: string): void;
+export declare function dismiss(id: string, toasterId?: string): void;
+export declare function dismissAll(toasterId?: string): void;
+export declare function updateHeight(id: string, height: number, toasterId?: string): void;
+export declare function setExpanded(expanded: boolean, toasterId?: string): void;
+interface PromiseOptions<T> {
+    loading: string | (ToastOptions & {
+        title: string;
+    });
+    success: string | (ToastOptions & {
+        title: string;
+    }) | ((data: T) => string | (ToastOptions & {
+        title: string;
+    }));
+    error: string | (ToastOptions & {
+        title: string;
+    }) | ((err: unknown) => string | (ToastOptions & {
+        title: string;
+    }));
+}
+type ToastFunction = {
+    (title: string, options?: ToastOptions): string;
+    success: (title: string, options?: ToastOptions) => string;
+    error: (title: string, options?: ToastOptions) => string;
+    warning: (title: string, options?: ToastOptions) => string;
+    info: (title: string, options?: ToastOptions) => string;
+    loading: (title: string, options?: ToastOptions) => string;
+    promise: <T>(promise: Promise<T>, options: PromiseOptions<T>) => Promise<T>;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+    use: (toasterId: string) => {
+        (title: string, options?: ToastOptions): string;
+        success: (title: string, options?: ToastOptions) => string;
+        error: (title: string, options?: ToastOptions) => string;
+        warning: (title: string, options?: ToastOptions) => string;
+        info: (title: string, options?: ToastOptions) => string;
+        loading: (title: string, options?: ToastOptions) => string;
+        promise: <T>(promise: Promise<T>, options: PromiseOptions<T>) => Promise<T>;
+        dismiss: (id: string) => void;
+        dismissAll: () => void;
+    };
+};
+export declare const toast: ToastFunction;
+export {};