lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
107 lines (106 loc) • 6.07 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// @ts-nocheck
import * as React from "react";
import * as ReactDOM from "react-dom";
import { cn } from "../../lib/utils"; // Assuming a utility for classnames
import { X } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
// Helper for cn if not provided
const dummyCn = (...inputs) => {
return inputs.filter(Boolean).join(' ');
};
const cnFunction = typeof cn !== 'undefined' ? cn : dummyCn;
const DialogContext = React.createContext(undefined);
const Dialog = ({ children, defaultOpen = false, open: controlledOpen, onOpenChange, }) => {
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
const isControlled = controlledOpen !== undefined;
const open = isControlled ? controlledOpen : uncontrolledOpen;
const setOpen = React.useCallback((value) => {
if (!isControlled) {
setUncontrolledOpen(value);
}
if (onOpenChange) {
const newValue = typeof value === "function" ? value(open) : value;
onOpenChange(newValue);
}
}, [isControlled, onOpenChange, open]);
return (_jsx(DialogContext.Provider, { value: { open, setOpen }, children: children }));
};
const DialogTrigger = React.forwardRef(({ children, asChild = false, ...props }, ref) => {
const context = React.useContext(DialogContext);
if (!context) {
throw new Error("DialogTrigger must be used within a Dialog");
}
const { setOpen } = context;
const handleClick = (e) => {
e.preventDefault();
setOpen(true);
if (props.onClick) {
props.onClick(e);
}
};
const { onClick, ...otherProps } = props;
if (asChild) {
return (_jsx("div", { ref: ref, onClick: handleClick, ...otherProps, children: React.Children.map(children, child => {
if (React.isValidElement(child)) {
const element = child;
return React.cloneElement(element, {
...element.props
});
}
return child;
}) }));
}
return (_jsx("div", { ref: ref, onClick: handleClick, ...otherProps, children: children }));
});
DialogTrigger.displayName = "DialogTrigger";
const DialogContent = React.forwardRef(({ className, children, hideCloseButton, ...props }, ref) => {
const context = React.useContext(DialogContext);
if (!context) {
throw new Error("DialogContent must be used within a Dialog");
}
const { open, setOpen } = context;
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
}, []);
React.useEffect(() => {
if (open) {
document.body.style.overflow = "hidden";
}
else {
document.body.style.overflow = "";
}
return () => {
document.body.style.overflow = "";
};
}, [open]);
if (!mounted)
return null;
return ReactDOM.createPortal(_jsx(AnimatePresence, { children: open && (_jsxs("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center p-4", children: [_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, className: "absolute inset-0 bg-background/80 backdrop-blur-sm", onClick: () => setOpen(false) }), _jsxs(motion.div, { ref: ref, initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.3 }, transition: {
type: "spring",
damping: 25,
stiffness: 400,
opacity: { duration: 0.2 }
}, className: cnFunction(`relative z-[9999] w-full max-w-lg rounded-2xl border
bg-background p-6 shadow-lg max-h-[90vh] overflow-y-auto`, className), role: "dialog", "aria-modal": "true", "data-lenis-prevent": true, ...props, children: [children, !hideCloseButton && (_jsxs("button", { onClick: () => setOpen(false), className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", "aria-label": "Close dialog", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] })) }), document.body);
});
DialogContent.displayName = "DialogContent";
const DialogHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cnFunction("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props })));
DialogHeader.displayName = "DialogHeader";
const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h2", { ref: ref, className: cnFunction("text-lg font-semibold leading-none tracking-tight", className), ...props })));
DialogTitle.displayName = "DialogTitle";
const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, className: cnFunction("text-sm text-muted-foreground", className), ...props })));
DialogDescription.displayName = "DialogDescription";
const DialogFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cnFunction("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props })));
DialogFooter.displayName = "DialogFooter";
const DialogClose = React.forwardRef(({ className, ...props }, ref) => {
const context = React.useContext(DialogContext);
const setOpen = context ? context.setOpen : () => { };
return (_jsx("button", { ref: ref, type: "button", className: className, onClick: (e) => {
setOpen(false);
props.onClick?.(e);
}, ...props }));
});
DialogClose.displayName = "DialogClose";
export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose };