ivt
Version:
Ivt Components Library
703 lines (699 loc) • 32.9 kB
JavaScript
import * as React from 'react';
import React__default from 'react';
import * as ReactDOM from 'react-dom';
import { P as Primitive, c as composeEventHandlers, d as dispatchDiscreteCustomEvent } from './index-Dsw02Eup.mjs';
import { c as createContextScope, u as useComposedRefs } from './index-D4jPaBZ2.mjs';
import { createCollection } from '@radix-ui/react-collection';
import { B as Branch, R as Root } from './index-4NpeUekv.mjs';
import { P as Portal } from './index-BksCjWh6.mjs';
import { P as Presence } from './index-DfeRLazC.mjs';
import { u as useCallbackRef } from './index-DC-gAYjS.mjs';
import { u as useControllableState } from './index-1toTCGyr.mjs';
import { u as useLayoutEffect2 } from './index-C8u7IIcP.mjs';
import { V as VisuallyHidden } from './index-BJrVyyCQ.mjs';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { cva } from 'class-variance-authority';
import { c as cn } from './utils-BDcRwQMd.mjs';
import { X } from './x-B6hDJA_l.mjs';
var PROVIDER_NAME = "ToastProvider";
var [Collection, useCollection, createCollectionScope] = createCollection("Toast");
var [createToastContext] = createContextScope("Toast", [
createCollectionScope
]);
var [ToastProviderProvider, useToastProviderContext] = createToastContext(PROVIDER_NAME);
var ToastProvider$1 = (props)=>{
const { __scopeToast, label = "Notification", duration = 5e3, swipeDirection = "right", swipeThreshold = 50, children } = props;
const [viewport, setViewport] = React.useState(null);
const [toastCount, setToastCount] = React.useState(0);
const isFocusedToastEscapeKeyDownRef = React.useRef(false);
const isClosePausedRef = React.useRef(false);
if (!label.trim()) {
console.error(`Invalid prop \`label\` supplied to \`${PROVIDER_NAME}\`. Expected non-empty \`string\`.`);
}
return /* @__PURE__ */ jsx(Collection.Provider, {
scope: __scopeToast,
children: /* @__PURE__ */ jsx(ToastProviderProvider, {
scope: __scopeToast,
label,
duration,
swipeDirection,
swipeThreshold,
toastCount,
viewport,
onViewportChange: setViewport,
onToastAdd: React.useCallback(()=>setToastCount((prevCount)=>prevCount + 1), []),
onToastRemove: React.useCallback(()=>setToastCount((prevCount)=>prevCount - 1), []),
isFocusedToastEscapeKeyDownRef,
isClosePausedRef,
children
})
});
};
ToastProvider$1.displayName = PROVIDER_NAME;
var VIEWPORT_NAME = "ToastViewport";
var VIEWPORT_DEFAULT_HOTKEY = [
"F8"
];
var VIEWPORT_PAUSE = "toast.viewportPause";
var VIEWPORT_RESUME = "toast.viewportResume";
var ToastViewport$1 = React.forwardRef((props, forwardedRef)=>{
const { __scopeToast, hotkey = VIEWPORT_DEFAULT_HOTKEY, label = "Notifications ({hotkey})", ...viewportProps } = props;
const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast);
const getItems = useCollection(__scopeToast);
const wrapperRef = React.useRef(null);
const headFocusProxyRef = React.useRef(null);
const tailFocusProxyRef = React.useRef(null);
const ref = React.useRef(null);
const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
const hasToasts = context.toastCount > 0;
React.useEffect(()=>{
const handleKeyDown = (event)=>{
const isHotkeyPressed = hotkey.length !== 0 && hotkey.every((key)=>event[key] || event.code === key);
if (isHotkeyPressed) ref.current?.focus();
};
document.addEventListener("keydown", handleKeyDown);
return ()=>document.removeEventListener("keydown", handleKeyDown);
}, [
hotkey
]);
React.useEffect(()=>{
const wrapper = wrapperRef.current;
const viewport = ref.current;
if (hasToasts && wrapper && viewport) {
const handlePause = ()=>{
if (!context.isClosePausedRef.current) {
const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
viewport.dispatchEvent(pauseEvent);
context.isClosePausedRef.current = true;
}
};
const handleResume = ()=>{
if (context.isClosePausedRef.current) {
const resumeEvent = new CustomEvent(VIEWPORT_RESUME);
viewport.dispatchEvent(resumeEvent);
context.isClosePausedRef.current = false;
}
};
const handleFocusOutResume = (event)=>{
const isFocusMovingOutside = !wrapper.contains(event.relatedTarget);
if (isFocusMovingOutside) handleResume();
};
const handlePointerLeaveResume = ()=>{
const isFocusInside = wrapper.contains(document.activeElement);
if (!isFocusInside) handleResume();
};
wrapper.addEventListener("focusin", handlePause);
wrapper.addEventListener("focusout", handleFocusOutResume);
wrapper.addEventListener("pointermove", handlePause);
wrapper.addEventListener("pointerleave", handlePointerLeaveResume);
window.addEventListener("blur", handlePause);
window.addEventListener("focus", handleResume);
return ()=>{
wrapper.removeEventListener("focusin", handlePause);
wrapper.removeEventListener("focusout", handleFocusOutResume);
wrapper.removeEventListener("pointermove", handlePause);
wrapper.removeEventListener("pointerleave", handlePointerLeaveResume);
window.removeEventListener("blur", handlePause);
window.removeEventListener("focus", handleResume);
};
}
}, [
hasToasts,
context.isClosePausedRef
]);
const getSortedTabbableCandidates = React.useCallback(({ tabbingDirection })=>{
const toastItems = getItems();
const tabbableCandidates = toastItems.map((toastItem)=>{
const toastNode = toastItem.ref.current;
const toastTabbableCandidates = [
toastNode,
...getTabbableCandidates(toastNode)
];
return tabbingDirection === "forwards" ? toastTabbableCandidates : toastTabbableCandidates.reverse();
});
return (tabbingDirection === "forwards" ? tabbableCandidates.reverse() : tabbableCandidates).flat();
}, [
getItems
]);
React.useEffect(()=>{
const viewport = ref.current;
if (viewport) {
const handleKeyDown = (event)=>{
const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
const isTabKey = event.key === "Tab" && !isMetaKey;
if (isTabKey) {
const focusedElement = document.activeElement;
const isTabbingBackwards = event.shiftKey;
const targetIsViewport = event.target === viewport;
if (targetIsViewport && isTabbingBackwards) {
headFocusProxyRef.current?.focus();
return;
}
const tabbingDirection = isTabbingBackwards ? "backwards" : "forwards";
const sortedCandidates = getSortedTabbableCandidates({
tabbingDirection
});
const index = sortedCandidates.findIndex((candidate)=>candidate === focusedElement);
if (focusFirst(sortedCandidates.slice(index + 1))) {
event.preventDefault();
} else {
isTabbingBackwards ? headFocusProxyRef.current?.focus() : tailFocusProxyRef.current?.focus();
}
}
};
viewport.addEventListener("keydown", handleKeyDown);
return ()=>viewport.removeEventListener("keydown", handleKeyDown);
}
}, [
getItems,
getSortedTabbableCandidates
]);
return /* @__PURE__ */ jsxs(Branch, {
ref: wrapperRef,
role: "region",
"aria-label": label.replace("{hotkey}", hotkeyLabel),
tabIndex: -1,
style: {
pointerEvents: hasToasts ? void 0 : "none"
},
children: [
hasToasts && /* @__PURE__ */ jsx(FocusProxy, {
ref: headFocusProxyRef,
onFocusFromOutsideViewport: ()=>{
const tabbableCandidates = getSortedTabbableCandidates({
tabbingDirection: "forwards"
});
focusFirst(tabbableCandidates);
}
}),
/* @__PURE__ */ jsx(Collection.Slot, {
scope: __scopeToast,
children: /* @__PURE__ */ jsx(Primitive.ol, {
tabIndex: -1,
...viewportProps,
ref: composedRefs
})
}),
hasToasts && /* @__PURE__ */ jsx(FocusProxy, {
ref: tailFocusProxyRef,
onFocusFromOutsideViewport: ()=>{
const tabbableCandidates = getSortedTabbableCandidates({
tabbingDirection: "backwards"
});
focusFirst(tabbableCandidates);
}
})
]
});
});
ToastViewport$1.displayName = VIEWPORT_NAME;
var FOCUS_PROXY_NAME = "ToastFocusProxy";
var FocusProxy = React.forwardRef((props, forwardedRef)=>{
const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;
const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
return /* @__PURE__ */ jsx(VisuallyHidden, {
tabIndex: 0,
...proxyProps,
ref: forwardedRef,
style: {
position: "fixed"
},
onFocus: (event)=>{
const prevFocusedElement = event.relatedTarget;
const isFocusFromOutsideViewport = !context.viewport?.contains(prevFocusedElement);
if (isFocusFromOutsideViewport) onFocusFromOutsideViewport();
}
});
});
FocusProxy.displayName = FOCUS_PROXY_NAME;
var TOAST_NAME = "Toast";
var TOAST_SWIPE_START = "toast.swipeStart";
var TOAST_SWIPE_MOVE = "toast.swipeMove";
var TOAST_SWIPE_CANCEL = "toast.swipeCancel";
var TOAST_SWIPE_END = "toast.swipeEnd";
var Toast$1 = React.forwardRef((props, forwardedRef)=>{
const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props;
const [open, setOpen] = useControllableState({
prop: openProp,
defaultProp: defaultOpen ?? true,
onChange: onOpenChange,
caller: TOAST_NAME
});
return /* @__PURE__ */ jsx(Presence, {
present: forceMount || open,
children: /* @__PURE__ */ jsx(ToastImpl, {
open,
...toastProps,
ref: forwardedRef,
onClose: ()=>setOpen(false),
onPause: useCallbackRef(props.onPause),
onResume: useCallbackRef(props.onResume),
onSwipeStart: composeEventHandlers(props.onSwipeStart, (event)=>{
event.currentTarget.setAttribute("data-swipe", "start");
}),
onSwipeMove: composeEventHandlers(props.onSwipeMove, (event)=>{
const { x, y } = event.detail.delta;
event.currentTarget.setAttribute("data-swipe", "move");
event.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${x}px`);
event.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${y}px`);
}),
onSwipeCancel: composeEventHandlers(props.onSwipeCancel, (event)=>{
event.currentTarget.setAttribute("data-swipe", "cancel");
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-x");
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-y");
event.currentTarget.style.removeProperty("--radix-toast-swipe-end-x");
event.currentTarget.style.removeProperty("--radix-toast-swipe-end-y");
}),
onSwipeEnd: composeEventHandlers(props.onSwipeEnd, (event)=>{
const { x, y } = event.detail.delta;
event.currentTarget.setAttribute("data-swipe", "end");
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-x");
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-y");
event.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${x}px`);
event.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${y}px`);
setOpen(false);
})
})
});
});
Toast$1.displayName = TOAST_NAME;
var [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(TOAST_NAME, {
onClose () {}
});
var ToastImpl = React.forwardRef((props, forwardedRef)=>{
const { __scopeToast, type = "foreground", duration: durationProp, open, onClose, onEscapeKeyDown, onPause, onResume, onSwipeStart, onSwipeMove, onSwipeCancel, onSwipeEnd, ...toastProps } = props;
const context = useToastProviderContext(TOAST_NAME, __scopeToast);
const [node, setNode] = React.useState(null);
const composedRefs = useComposedRefs(forwardedRef, (node2)=>setNode(node2));
const pointerStartRef = React.useRef(null);
const swipeDeltaRef = React.useRef(null);
const duration = durationProp || context.duration;
const closeTimerStartTimeRef = React.useRef(0);
const closeTimerRemainingTimeRef = React.useRef(duration);
const closeTimerRef = React.useRef(0);
const { onToastAdd, onToastRemove } = context;
const handleClose = useCallbackRef(()=>{
const isFocusInToast = node?.contains(document.activeElement);
if (isFocusInToast) context.viewport?.focus();
onClose();
});
const startTimer = React.useCallback((duration2)=>{
if (!duration2 || duration2 === Infinity) return;
window.clearTimeout(closeTimerRef.current);
closeTimerStartTimeRef.current = /* @__PURE__ */ new Date().getTime();
closeTimerRef.current = window.setTimeout(handleClose, duration2);
}, [
handleClose
]);
React.useEffect(()=>{
const viewport = context.viewport;
if (viewport) {
const handleResume = ()=>{
startTimer(closeTimerRemainingTimeRef.current);
onResume?.();
};
const handlePause = ()=>{
const elapsedTime = /* @__PURE__ */ new Date().getTime() - closeTimerStartTimeRef.current;
closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
window.clearTimeout(closeTimerRef.current);
onPause?.();
};
viewport.addEventListener(VIEWPORT_PAUSE, handlePause);
viewport.addEventListener(VIEWPORT_RESUME, handleResume);
return ()=>{
viewport.removeEventListener(VIEWPORT_PAUSE, handlePause);
viewport.removeEventListener(VIEWPORT_RESUME, handleResume);
};
}
}, [
context.viewport,
duration,
onPause,
onResume,
startTimer
]);
React.useEffect(()=>{
if (open && !context.isClosePausedRef.current) startTimer(duration);
}, [
open,
duration,
context.isClosePausedRef,
startTimer
]);
React.useEffect(()=>{
onToastAdd();
return ()=>onToastRemove();
}, [
onToastAdd,
onToastRemove
]);
const announceTextContent = React.useMemo(()=>{
return node ? getAnnounceTextContent(node) : null;
}, [
node
]);
if (!context.viewport) return null;
return /* @__PURE__ */ jsxs(Fragment, {
children: [
announceTextContent && /* @__PURE__ */ jsx(ToastAnnounce, {
__scopeToast,
role: "status",
"aria-live": type === "foreground" ? "assertive" : "polite",
children: announceTextContent
}),
/* @__PURE__ */ jsx(ToastInteractiveProvider, {
scope: __scopeToast,
onClose: handleClose,
children: ReactDOM.createPortal(/* @__PURE__ */ jsx(Collection.ItemSlot, {
scope: __scopeToast,
children: /* @__PURE__ */ jsx(Root, {
asChild: true,
onEscapeKeyDown: composeEventHandlers(onEscapeKeyDown, ()=>{
if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
context.isFocusedToastEscapeKeyDownRef.current = false;
}),
children: /* @__PURE__ */ jsx(Primitive.li, {
tabIndex: 0,
"data-state": open ? "open" : "closed",
"data-swipe-direction": context.swipeDirection,
...toastProps,
ref: composedRefs,
style: {
userSelect: "none",
touchAction: "none",
...props.style
},
onKeyDown: composeEventHandlers(props.onKeyDown, (event)=>{
if (event.key !== "Escape") return;
onEscapeKeyDown?.(event.nativeEvent);
if (!event.nativeEvent.defaultPrevented) {
context.isFocusedToastEscapeKeyDownRef.current = true;
handleClose();
}
}),
onPointerDown: composeEventHandlers(props.onPointerDown, (event)=>{
if (event.button !== 0) return;
pointerStartRef.current = {
x: event.clientX,
y: event.clientY
};
}),
onPointerMove: composeEventHandlers(props.onPointerMove, (event)=>{
if (!pointerStartRef.current) return;
const x = event.clientX - pointerStartRef.current.x;
const y = event.clientY - pointerStartRef.current.y;
const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current);
const isHorizontalSwipe = [
"left",
"right"
].includes(context.swipeDirection);
const clamp = [
"left",
"up"
].includes(context.swipeDirection) ? Math.min : Math.max;
const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;
const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0;
const moveStartBuffer = event.pointerType === "touch" ? 10 : 2;
const delta = {
x: clampedX,
y: clampedY
};
const eventDetail = {
originalEvent: event,
delta
};
if (hasSwipeMoveStarted) {
swipeDeltaRef.current = delta;
handleAndDispatchCustomEvent(TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
discrete: false
});
} else if (isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {
swipeDeltaRef.current = delta;
handleAndDispatchCustomEvent(TOAST_SWIPE_START, onSwipeStart, eventDetail, {
discrete: false
});
event.target.setPointerCapture(event.pointerId);
} else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) {
pointerStartRef.current = null;
}
}),
onPointerUp: composeEventHandlers(props.onPointerUp, (event)=>{
const delta = swipeDeltaRef.current;
const target = event.target;
if (target.hasPointerCapture(event.pointerId)) {
target.releasePointerCapture(event.pointerId);
}
swipeDeltaRef.current = null;
pointerStartRef.current = null;
if (delta) {
const toast = event.currentTarget;
const eventDetail = {
originalEvent: event,
delta
};
if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {
handleAndDispatchCustomEvent(TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
discrete: true
});
} else {
handleAndDispatchCustomEvent(TOAST_SWIPE_CANCEL, onSwipeCancel, eventDetail, {
discrete: true
});
}
toast.addEventListener("click", (event2)=>event2.preventDefault(), {
once: true
});
}
})
})
})
}), context.viewport)
})
]
});
});
var ToastAnnounce = (props)=>{
const { __scopeToast, children, ...announceProps } = props;
const context = useToastProviderContext(TOAST_NAME, __scopeToast);
const [renderAnnounceText, setRenderAnnounceText] = React.useState(false);
const [isAnnounced, setIsAnnounced] = React.useState(false);
useNextFrame(()=>setRenderAnnounceText(true));
React.useEffect(()=>{
const timer = window.setTimeout(()=>setIsAnnounced(true), 1e3);
return ()=>window.clearTimeout(timer);
}, []);
return isAnnounced ? null : /* @__PURE__ */ jsx(Portal, {
asChild: true,
children: /* @__PURE__ */ jsx(VisuallyHidden, {
...announceProps,
children: renderAnnounceText && /* @__PURE__ */ jsxs(Fragment, {
children: [
context.label,
" ",
children
]
})
})
});
};
var TITLE_NAME = "ToastTitle";
var ToastTitle$1 = React.forwardRef((props, forwardedRef)=>{
const { __scopeToast, ...titleProps } = props;
return /* @__PURE__ */ jsx(Primitive.div, {
...titleProps,
ref: forwardedRef
});
});
ToastTitle$1.displayName = TITLE_NAME;
var DESCRIPTION_NAME = "ToastDescription";
var ToastDescription$1 = React.forwardRef((props, forwardedRef)=>{
const { __scopeToast, ...descriptionProps } = props;
return /* @__PURE__ */ jsx(Primitive.div, {
...descriptionProps,
ref: forwardedRef
});
});
ToastDescription$1.displayName = DESCRIPTION_NAME;
var ACTION_NAME = "ToastAction";
var ToastAction$1 = React.forwardRef((props, forwardedRef)=>{
const { altText, ...actionProps } = props;
if (!altText.trim()) {
console.error(`Invalid prop \`altText\` supplied to \`${ACTION_NAME}\`. Expected non-empty \`string\`.`);
return null;
}
return /* @__PURE__ */ jsx(ToastAnnounceExclude, {
altText,
asChild: true,
children: /* @__PURE__ */ jsx(ToastClose$1, {
...actionProps,
ref: forwardedRef
})
});
});
ToastAction$1.displayName = ACTION_NAME;
var CLOSE_NAME = "ToastClose";
var ToastClose$1 = React.forwardRef((props, forwardedRef)=>{
const { __scopeToast, ...closeProps } = props;
const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast);
return /* @__PURE__ */ jsx(ToastAnnounceExclude, {
asChild: true,
children: /* @__PURE__ */ jsx(Primitive.button, {
type: "button",
...closeProps,
ref: forwardedRef,
onClick: composeEventHandlers(props.onClick, interactiveContext.onClose)
})
});
});
ToastClose$1.displayName = CLOSE_NAME;
var ToastAnnounceExclude = React.forwardRef((props, forwardedRef)=>{
const { __scopeToast, altText, ...announceExcludeProps } = props;
return /* @__PURE__ */ jsx(Primitive.div, {
"data-radix-toast-announce-exclude": "",
"data-radix-toast-announce-alt": altText || void 0,
...announceExcludeProps,
ref: forwardedRef
});
});
function getAnnounceTextContent(container) {
const textContent = [];
const childNodes = Array.from(container.childNodes);
childNodes.forEach((node)=>{
if (node.nodeType === node.TEXT_NODE && node.textContent) textContent.push(node.textContent);
if (isHTMLElement(node)) {
const isHidden = node.ariaHidden || node.hidden || node.style.display === "none";
const isExcluded = node.dataset.radixToastAnnounceExclude === "";
if (!isHidden) {
if (isExcluded) {
const altText = node.dataset.radixToastAnnounceAlt;
if (altText) textContent.push(altText);
} else {
textContent.push(...getAnnounceTextContent(node));
}
}
}
});
return textContent;
}
function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
const currentTarget = detail.originalEvent.currentTarget;
const event = new CustomEvent(name, {
bubbles: true,
cancelable: true,
detail
});
if (handler) currentTarget.addEventListener(name, handler, {
once: true
});
if (discrete) {
dispatchDiscreteCustomEvent(currentTarget, event);
} else {
currentTarget.dispatchEvent(event);
}
}
var isDeltaInDirection = (delta, direction, threshold = 0)=>{
const deltaX = Math.abs(delta.x);
const deltaY = Math.abs(delta.y);
const isDeltaX = deltaX > deltaY;
if (direction === "left" || direction === "right") {
return isDeltaX && deltaX > threshold;
} else {
return !isDeltaX && deltaY > threshold;
}
};
function useNextFrame(callback = ()=>{}) {
const fn = useCallbackRef(callback);
useLayoutEffect2(()=>{
let raf1 = 0;
let raf2 = 0;
raf1 = window.requestAnimationFrame(()=>raf2 = window.requestAnimationFrame(fn));
return ()=>{
window.cancelAnimationFrame(raf1);
window.cancelAnimationFrame(raf2);
};
}, [
fn
]);
}
function isHTMLElement(node) {
return node.nodeType === node.ELEMENT_NODE;
}
function getTabbableCandidates(container) {
const nodes = [];
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
acceptNode: (node)=>{
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
});
while(walker.nextNode())nodes.push(walker.currentNode);
return nodes;
}
function focusFirst(candidates) {
const previouslyFocusedElement = document.activeElement;
return candidates.some((candidate)=>{
if (candidate === previouslyFocusedElement) return true;
candidate.focus();
return document.activeElement !== previouslyFocusedElement;
});
}
var Provider = ToastProvider$1;
var Viewport = ToastViewport$1;
var Root2 = Toast$1;
var Title = ToastTitle$1;
var Description = ToastDescription$1;
var Action = ToastAction$1;
var Close = ToastClose$1;
const ToastProvider = Provider;
const ToastViewport = ({ className, ...props })=>/*#__PURE__*/ React__default.createElement(Viewport, {
"data-slot": "toast-viewport",
className: cn("fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]", className),
...props
});
const toastVariants = cva("group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", {
variants: {
variant: {
default: "border bg-background text-foreground",
destructive: "destructive group border-destructive-foreground bg-destructive-foreground text-destructive border-destructive"
}
},
defaultVariants: {
variant: "default"
}
});
const Toast = ({ className, variant, ...props })=>{
return /*#__PURE__*/ React__default.createElement(Root2, {
"data-slot": "toast-root",
className: cn(toastVariants({
variant
}), className),
...props
});
};
const ToastAction = ({ className, ...props })=>/*#__PURE__*/ React__default.createElement(Action, {
"data-slot": "toast-action",
className: cn("ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none disabled:opacity-50", className),
...props
});
const ToastClose = ({ className, ...props })=>/*#__PURE__*/ React__default.createElement(Close, {
"data-slot": "toast-close",
className: cn("text-foreground/50 hover:text-foreground absolute top-2 right-2 rounded-md p-1 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:ring-2 focus:outline-none group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600", className),
"toast-close": "",
...props
}, /*#__PURE__*/ React__default.createElement(X, {
className: "h-4 w-4"
}));
const ToastTitle = ({ className, ...props })=>/*#__PURE__*/ React__default.createElement(Title, {
"data-slot": "toast-title",
className: cn("text-sm font-semibold", className),
...props
});
const ToastDescription = ({ className, ...props })=>/*#__PURE__*/ React__default.createElement(Description, {
"data-slot": "toast-description",
className: cn("text-sm opacity-90", className),
...props
});
export { ToastProvider as T, ToastViewport as a, Toast as b, ToastTitle as c, ToastDescription as d, ToastClose as e, ToastAction as f };
//# sourceMappingURL=toast-DfCz10Et.mjs.map