infinity-ui-elements 1.8.63 → 1.9.0

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AAGvC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,IAAI,EACJ,iBAAiB,EACjB,OAAO,EACP,YAAY,EACZ,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,gBAAgB,GACtB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AAGvC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,IAAI,EACJ,iBAAiB,EACjB,OAAO,EACP,YAAY,EACZ,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,gBAAgB,GACtB,MAAM,aAAa,CAAC"}

package/dist/index.esm.js

@@ -953,7 +953,7 @@ const alertTextVariants = cva("", {
         intent: "info",
     },
 });
-const getDefaultIcon = (intent, emphasis) => {
+const getDefaultIcon$1 = (intent, emphasis) => {
     const iconSize = 16;
     switch (emphasis) {
         case "intense":
@@ -1001,7 +1001,7 @@ const getActionLink = (actionButtonText, onActionLinkClick, emphasis, intent) =>
     return (jsx(Link, { type: "action", color: intent, size: "small", onClick: onActionLinkClick, children: actionButtonText }));
 };
 const Alert = React.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;
@@ -2005,19 +2005,19 @@ const FormHeader = React.forwardRef(({ label, size = "medium", isOptional = fals
     // 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",
@@ -4846,6 +4846,339 @@ const TextArea = React.forwardRef(({ label, helperText, errorText, successText,
 });
 TextArea.displayName = "TextArea";
 
+const toastVariants = 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 = 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 = cva("text-body-small-regular", {
+    variants: {
+        type: {
+            information: "text-white",
+            promotional: "text-surface-ink-neutral-normal",
+        },
+    },
+    defaultVariants: {
+        type: "information",
+    },
+});
+const toastLinkVariants = 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 = 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 jsx(Icon, { name: "info", size: iconSize, "aria-hidden": "true" });
+    }
+    // Information type icons based on intent
+    switch (intent) {
+        case "positive":
+            return jsx(Icon, { name: "check", size: iconSize, "aria-hidden": "true" });
+        case "negative":
+            return jsx(Icon, { name: "exclamation", size: iconSize, "aria-hidden": "true" });
+        case "notice":
+            return jsx(Icon, { name: "info", size: iconSize, "aria-hidden": "true" });
+        case "info":
+            return jsx(Icon, { name: "info", size: iconSize, "aria-hidden": "true" });
+        case "neutral":
+        default:
+            return jsx(Icon, { name: "check", size: iconSize, "aria-hidden": "true" });
+    }
+};
+const Toast = React.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.useState(isVisible);
+    const timerRef = React.useRef(null);
+    React.useEffect(() => {
+        setVisible(isVisible);
+    }, [isVisible]);
+    React.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 (jsxs("div", { ref: ref, className: cn(toastVariants({ type, intent }), "flex-row items-start gap-3", className), role: "alert", ...props, children: [jsx("div", { className: "py-1", children: jsx("div", { className: cn(toastIconVariants({ type }), "h-5 w-5 shrink-0"), children: displayIcon }) }), jsxs("div", { className: "flex flex-col gap-3", children: [jsxs("div", { className: "flex flex-row items-center justify-between", children: [jsx("div", { className: "flex-1 min-w-0", children: heading && (jsx("div", { className: "text-body-small-semibold text-surface-ink-neutral-normal", children: heading })) }), onClose && (jsx("div", { className: cn(toastCloseButtonVariants({ type }), "h-5 w-5"), onClick: handleClose, role: "button", "aria-label": "Close toast", children: jsx(Icon, { name: "close", size: 16 }) }))] }), description && (jsx("div", { className: "text-body-small-regular text-surface-ink-neutral-subtle", children: description })), buttonText && (jsx("div", { children: jsx(Button, { variant: "secondary", color: "primary", size: "xsmall", onClick: onButtonClick, children: buttonText }) }))] })] }));
+    }
+    // Information type layout
+    return (jsxs("div", { ref: ref, className: cn(toastVariants({ type, intent }), className), role: "alert", ...props, children: [jsx("div", { className: cn(toastIconVariants({ type }), "h-5 w-5 shrink-0"), children: displayIcon }), jsx("div", { className: cn(toastTextVariants({ type }), "flex-1 min-w-0"), children: message }), linkText && (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 && (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: jsx(Icon, { name: "close", size: 16 }) }))] }));
+});
+Toast.displayName = "Toast";
+
+const ToastContext = React.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.useState([]);
+    const toastCounter = React.useRef(0);
+    const generateId = () => {
+        toastCounter.current += 1;
+        return `toast-${Date.now()}-${toastCounter.current}`;
+    };
+    const showToast = React.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.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.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.useCallback((message, options) => {
+        return showToast({
+            type: "information",
+            intent: "positive",
+            message,
+            ...options,
+        });
+    }, [showToast]);
+    const error = React.useCallback((message, options) => {
+        return showToast({
+            type: "information",
+            intent: "negative",
+            message,
+            ...options,
+        });
+    }, [showToast]);
+    const warning = React.useCallback((message, options) => {
+        return showToast({
+            type: "information",
+            intent: "notice",
+            message,
+            ...options,
+        });
+    }, [showToast]);
+    const info = React.useCallback((message, options) => {
+        return showToast({
+            type: "information",
+            intent: "info",
+            message,
+            ...options,
+        });
+    }, [showToast]);
+    const promotional = React.useCallback((heading, description, options) => {
+        return showToast({
+            type: "promotional",
+            heading,
+            description,
+            ...options,
+        });
+    }, [showToast]);
+    const contextValue = React.useMemo(() => ({
+        showToast,
+        success,
+        error,
+        warning,
+        info,
+        promotional,
+        dismiss,
+        dismissAll,
+    }), [showToast, success, error, warning, info, promotional, dismiss, dismissAll]);
+    // Group toasts by position
+    const toastsByPosition = React.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 (jsxs(ToastContext.Provider, { value: contextValue, children: [children, Object.keys(toastsByPosition).map((position) => {
+                const positionToasts = toastsByPosition[position];
+                if (!positionToasts)
+                    return null;
+                return (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 (jsx("div", { className: cn("will-change-transform transition-transform duration-200 ease-out", animationClasses), children: 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.useContext(ToastContext);
+    if (!context) {
+        throw new Error("useToast must be used within a ToastProvider");
+    }
+    return context;
+};
+
 const uploadBoxVariants = cva("relative flex flex-col items-center justify-center border-2 border-dashed rounded-large transition-all font-display", {
     variants: {
         size: {
@@ -5197,5 +5530,5 @@ const UploadBox = React.forwardRef(({ label, helperText, errorText, successText,
 });
 UploadBox.displayName = "UploadBox";
 
-export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants };
+export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Toast, ToastProvider, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants, useToast };
 //# sourceMappingURL=index.esm.js.map