infinity-ui-elements 1.8.63 → 1.9.0

package/dist/index.js

@@ -974,7 +974,7 @@ const alertTextVariants = classVarianceAuthority.cva("", {
         intent: "info",
     },
 });
-const getDefaultIcon = (intent, emphasis) => {
+const getDefaultIcon$1 = (intent, emphasis) => {
     const iconSize = 16;
     switch (emphasis) {
         case "intense":
@@ -1022,7 +1022,7 @@ const getActionLink = (actionButtonText, onActionLinkClick, emphasis, intent) =>
     return (jsxRuntime.jsx(Link, { type: "action", color: intent, size: "small", onClick: onActionLinkClick, children: actionButtonText }));
 };
 const Alert = React__namespace.forwardRef(({ className, emphasis = "subtle", intent = "info", title, children, isFullWidth = false, onClose, icon, actionButtonText, onActionButtonClick, actionLinkText, onActionLinkClick, ...props }, ref) => {
-    const displayIcon = icon ?? getDefaultIcon(intent, emphasis);
+    const displayIcon = icon ?? getDefaultIcon$1(intent, emphasis);
     const actionButton = getActionButton(actionButtonText, onActionButtonClick, emphasis, intent);
     const actionLink = getActionLink(actionLinkText, onActionLinkClick, emphasis, intent);
     const hasActions = actionButton || actionLink;
@@ -2026,19 +2026,19 @@ const FormHeader = React__namespace.forwardRef(({ label, size = "medium", isOpti
     // Size-based configurations
     const sizeConfig = {
         small: {
-            textClassName: "text-body-xsmall-semibold",
+            textClassName: "text-body-xsmall-medium",
             textClassNameRegular: "text-caption-small-regular",
             iconSize: 12,
             gap: "gap-1.5",
         },
         medium: {
-            textClassName: "text-body-small-semibold",
+            textClassName: "text-body-small-medium",
             textClassNameRegular: "text-caption-medium-regular",
             iconSize: 14,
             gap: "gap-2",
         },
         large: {
-            textClassName: "text-body-medium-semibold",
+            textClassName: "text-body-medium-medium",
             textClassNameRegular: "text-caption-large-regular",
             iconSize: 16,
             gap: "gap-2.5",
@@ -4867,6 +4867,339 @@ const TextArea = React__namespace.forwardRef(({ label, helperText, errorText, su
 });
 TextArea.displayName = "TextArea";
 
+const toastVariants = classVarianceAuthority.cva("relative flex items-center gap-3 p-4 rounded-large shadow-lg min-w-[360px] max-w-[480px] transition-all", {
+    variants: {
+        type: {
+            information: "",
+            promotional: "bg-surface-fill-neutral-intense",
+        },
+        intent: {
+            neutral: "",
+            positive: "",
+            negative: "",
+            notice: "",
+            info: "",
+        },
+    },
+    compoundVariants: [
+        // Information type with different intents
+        {
+            type: "information",
+            intent: "neutral",
+            class: "bg-feedback-fill-neutral-intense",
+        },
+        {
+            type: "information",
+            intent: "positive",
+            class: "bg-feedback-fill-positive-intense",
+        },
+        {
+            type: "information",
+            intent: "negative",
+            class: "bg-feedback-fill-negative-intense",
+        },
+        {
+            type: "information",
+            intent: "notice",
+            class: "bg-feedback-fill-notice-intense",
+        },
+        {
+            type: "information",
+            intent: "info",
+            class: "bg-feedback-fill-info-intense",
+        },
+    ],
+    defaultVariants: {
+        type: "information",
+        intent: "neutral",
+    },
+});
+const toastIconVariants = classVarianceAuthority.cva("flex-shrink-0 flex items-center justify-center", {
+    variants: {
+        type: {
+            information: "text-white",
+            promotional: "text-action-ink-neutral-normal",
+        },
+    },
+    defaultVariants: {
+        type: "information",
+    },
+});
+const toastTextVariants = classVarianceAuthority.cva("text-body-small-regular", {
+    variants: {
+        type: {
+            information: "text-white",
+            promotional: "text-surface-ink-neutral-normal",
+        },
+    },
+    defaultVariants: {
+        type: "information",
+    },
+});
+const toastLinkVariants = classVarianceAuthority.cva("text-body-small-medium cursor-pointer hover:underline", {
+    variants: {
+        type: {
+            information: "text-white",
+            promotional: "text-action-ink-primary-normal hover:text-action-ink-primary-subtle",
+        },
+    },
+    defaultVariants: {
+        type: "information",
+    },
+});
+const toastCloseButtonVariants = classVarianceAuthority.cva("flex-shrink-0 cursor-pointer hover:opacity-75 transition-opacity", {
+    variants: {
+        type: {
+            information: "text-white",
+            promotional: "text-action-ink-neutral-subtle",
+        },
+    },
+    defaultVariants: {
+        type: "information",
+    },
+});
+const getDefaultIcon = (type, intent) => {
+    const iconSize = 16;
+    if (type === "promotional") {
+        return jsxRuntime.jsx(Icon, { name: "info", size: iconSize, "aria-hidden": "true" });
+    }
+    // Information type icons based on intent
+    switch (intent) {
+        case "positive":
+            return jsxRuntime.jsx(Icon, { name: "check", size: iconSize, "aria-hidden": "true" });
+        case "negative":
+            return jsxRuntime.jsx(Icon, { name: "exclamation", size: iconSize, "aria-hidden": "true" });
+        case "notice":
+            return jsxRuntime.jsx(Icon, { name: "info", size: iconSize, "aria-hidden": "true" });
+        case "info":
+            return jsxRuntime.jsx(Icon, { name: "info", size: iconSize, "aria-hidden": "true" });
+        case "neutral":
+        default:
+            return jsxRuntime.jsx(Icon, { name: "check", size: iconSize, "aria-hidden": "true" });
+    }
+};
+const Toast = React__namespace.forwardRef(({ className, type = "information", intent = "neutral", icon, message, heading, description, linkText, onLinkClick, buttonText, onButtonClick, onClose, duration = 5000, isVisible = true, ...props }, ref) => {
+    const [visible, setVisible] = React__namespace.useState(isVisible);
+    const timerRef = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+        setVisible(isVisible);
+    }, [isVisible]);
+    React__namespace.useEffect(() => {
+        // Auto-dismiss only for information type
+        if (type === "information" && visible && duration > 0) {
+            timerRef.current = window.setTimeout(() => {
+                setVisible(false);
+                onClose?.();
+            }, duration);
+        }
+        return () => {
+            if (timerRef.current) {
+                window.clearTimeout(timerRef.current);
+            }
+        };
+    }, [type, visible, duration, onClose]);
+    const handleClose = () => {
+        setVisible(false);
+        onClose?.();
+    };
+    const displayIcon = icon ?? getDefaultIcon(type, intent);
+    if (!visible) {
+        return null;
+    }
+    // Promotional type layout
+    if (type === "promotional") {
+        return (jsxRuntime.jsxs("div", { ref: ref, className: cn(toastVariants({ type, intent }), "flex-row items-start gap-3", className), role: "alert", ...props, children: [jsxRuntime.jsx("div", { className: "py-1", children: jsxRuntime.jsx("div", { className: cn(toastIconVariants({ type }), "h-5 w-5 shrink-0"), children: displayIcon }) }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-between", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: heading && (jsxRuntime.jsx("div", { className: "text-body-small-semibold text-surface-ink-neutral-normal", children: heading })) }), onClose && (jsxRuntime.jsx("div", { className: cn(toastCloseButtonVariants({ type }), "h-5 w-5"), onClick: handleClose, role: "button", "aria-label": "Close toast", children: jsxRuntime.jsx(Icon, { name: "close", size: 16 }) }))] }), description && (jsxRuntime.jsx("div", { className: "text-body-small-regular text-surface-ink-neutral-subtle", children: description })), buttonText && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Button, { variant: "secondary", color: "primary", size: "xsmall", onClick: onButtonClick, children: buttonText }) }))] })] }));
+    }
+    // Information type layout
+    return (jsxRuntime.jsxs("div", { ref: ref, className: cn(toastVariants({ type, intent }), className), role: "alert", ...props, children: [jsxRuntime.jsx("div", { className: cn(toastIconVariants({ type }), "h-5 w-5 shrink-0"), children: displayIcon }), jsxRuntime.jsx("div", { className: cn(toastTextVariants({ type }), "flex-1 min-w-0"), children: message }), linkText && (jsxRuntime.jsx("div", { className: cn(toastLinkVariants({ type }), "shrink-0"), onClick: onLinkClick, role: "button", tabIndex: 0, onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        onLinkClick?.();
+                    }
+                }, children: linkText })), onClose && (jsxRuntime.jsx("div", { className: cn(toastCloseButtonVariants({ type }), "h-5 w-5"), onClick: handleClose, role: "button", "aria-label": "Close toast", tabIndex: 0, onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleClose();
+                    }
+                }, children: jsxRuntime.jsx(Icon, { name: "close", size: 16 }) }))] }));
+});
+Toast.displayName = "Toast";
+
+const ToastContext = React__namespace.createContext(undefined);
+const positionClasses = {
+    "top-left": "top-4 left-4",
+    "top-center": "top-4 left-1/2 -translate-x-1/2",
+    "top-right": "top-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
+    "bottom-right": "bottom-4 right-4",
+};
+const getDefaultPosition = (type) => {
+    return type === "promotional" ? "bottom-right" : "bottom-center";
+};
+const getAnimationClasses = (position, isVisible) => {
+    const isTop = position.startsWith("top");
+    const isBottom = position.startsWith("bottom");
+    if (!isVisible) {
+        // Exit/hidden state - slide out
+        if (isTop) {
+            return "-translate-y-[120%] pointer-events-none";
+        }
+        if (isBottom) {
+            return "translate-y-[120%] pointer-events-none";
+        }
+        // Fallback
+        return "translate-y-[120%] pointer-events-none";
+    }
+    // Visible state - slide in
+    return "translate-y-0";
+};
+const ToastProvider = ({ children, maxToasts = 5, defaultDuration = 5000, }) => {
+    const [toasts, setToasts] = React__namespace.useState([]);
+    const toastCounter = React__namespace.useRef(0);
+    const generateId = () => {
+        toastCounter.current += 1;
+        return `toast-${Date.now()}-${toastCounter.current}`;
+    };
+    const showToast = React__namespace.useCallback((options) => {
+        const id = options.id || generateId();
+        const toastType = options.type || "information";
+        const newToast = {
+            ...options,
+            id,
+            isVisible: false, // Start hidden to trigger entry animation
+            type: toastType,
+            position: options.position || getDefaultPosition(toastType),
+            duration: options.duration ??
+                (toastType === "promotional" ? 0 : defaultDuration),
+        };
+        setToasts((prevToasts) => {
+            const filtered = prevToasts.filter((t) => t.id !== id);
+            const updated = [...filtered, newToast];
+            // Keep only the most recent maxToasts
+            return updated.slice(-maxToasts);
+        });
+        // Trigger entry animation after DOM update
+        // Use setTimeout to ensure the initial hidden state is rendered first
+        setTimeout(() => {
+            setToasts((prevToasts) => prevToasts.map((toast) => toast.id === id ? { ...toast, isVisible: true } : toast));
+        }, 10);
+        return id;
+    }, [maxToasts, defaultDuration]);
+    const dismiss = React__namespace.useCallback((id) => {
+        setToasts((prevToasts) => prevToasts.map((toast) => toast.id === id ? { ...toast, isVisible: false } : toast));
+        // Remove toast after animation completes (500ms animation + 50ms buffer)
+        setTimeout(() => {
+            setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
+        }, 550);
+    }, []);
+    const dismissAll = React__namespace.useCallback(() => {
+        setToasts((prevToasts) => prevToasts.map((toast) => ({ ...toast, isVisible: false })));
+        // Remove all toasts after animation completes (500ms animation + 50ms buffer)
+        setTimeout(() => {
+            setToasts([]);
+        }, 550);
+    }, []);
+    const success = React__namespace.useCallback((message, options) => {
+        return showToast({
+            type: "information",
+            intent: "positive",
+            message,
+            ...options,
+        });
+    }, [showToast]);
+    const error = React__namespace.useCallback((message, options) => {
+        return showToast({
+            type: "information",
+            intent: "negative",
+            message,
+            ...options,
+        });
+    }, [showToast]);
+    const warning = React__namespace.useCallback((message, options) => {
+        return showToast({
+            type: "information",
+            intent: "notice",
+            message,
+            ...options,
+        });
+    }, [showToast]);
+    const info = React__namespace.useCallback((message, options) => {
+        return showToast({
+            type: "information",
+            intent: "info",
+            message,
+            ...options,
+        });
+    }, [showToast]);
+    const promotional = React__namespace.useCallback((heading, description, options) => {
+        return showToast({
+            type: "promotional",
+            heading,
+            description,
+            ...options,
+        });
+    }, [showToast]);
+    const contextValue = React__namespace.useMemo(() => ({
+        showToast,
+        success,
+        error,
+        warning,
+        info,
+        promotional,
+        dismiss,
+        dismissAll,
+    }), [showToast, success, error, warning, info, promotional, dismiss, dismissAll]);
+    // Group toasts by position
+    const toastsByPosition = React__namespace.useMemo(() => {
+        const grouped = {};
+        toasts.forEach((toast) => {
+            const pos = toast.position || getDefaultPosition(toast.type);
+            if (!grouped[pos]) {
+                grouped[pos] = [];
+            }
+            grouped[pos].push(toast);
+        });
+        return grouped;
+    }, [toasts]);
+    return (jsxRuntime.jsxs(ToastContext.Provider, { value: contextValue, children: [children, Object.keys(toastsByPosition).map((position) => {
+                const positionToasts = toastsByPosition[position];
+                if (!positionToasts)
+                    return null;
+                return (jsxRuntime.jsx("div", { className: `fixed z-50 flex flex-col gap-3 ${positionClasses[position]}`, "aria-live": "polite", "aria-atomic": "false", children: positionToasts.map((toast) => {
+                        const toastPosition = toast.position || getDefaultPosition(toast.type);
+                        const animationClasses = getAnimationClasses(toastPosition, toast.isVisible);
+                        return (jsxRuntime.jsx("div", { className: cn("will-change-transform transition-transform duration-200 ease-out", animationClasses), children: jsxRuntime.jsx(Toast, { ...toast, isVisible: toast.isVisible, onClose: () => {
+                                    toast.onClose?.();
+                                    dismiss(toast.id);
+                                } }) }, toast.id));
+                    }) }, position));
+            })] }));
+};
+/**
+ * Hook to access toast functionality
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const toast = useToast();
+ *
+ *   return (
+ *     <button onClick={() => toast.success("Saved successfully!")}>
+ *       Save
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+const useToast = () => {
+    const context = React__namespace.useContext(ToastContext);
+    if (!context) {
+        throw new Error("useToast must be used within a ToastProvider");
+    }
+    return context;
+};
+
 const uploadBoxVariants = classVarianceAuthority.cva("relative flex flex-col items-center justify-center border-2 border-dashed rounded-large transition-all font-display", {
     variants: {
         size: {
@@ -5258,6 +5591,8 @@ exports.Tabs = Tabs;
 exports.Text = Text;
 exports.TextArea = TextArea;
 exports.TextField = TextField;
+exports.Toast = Toast;
+exports.ToastProvider = ToastProvider;
 exports.Tooltip = Tooltip;
 exports.UploadBox = UploadBox;
 exports.alertVariants = alertVariants;
@@ -5287,4 +5622,5 @@ exports.textAreaVariants = textAreaVariants;
 exports.textFieldVariants = textFieldVariants;
 exports.tooltipVariants = tooltipVariants;
 exports.uploadBoxVariants = uploadBoxVariants;
+exports.useToast = useToast;
 //# sourceMappingURL=index.js.map