nexoreui 0.1.0 → 0.1.2

package/dist/index.js

@@ -2416,46 +2416,66 @@ function ShimmerBlock({ className }) {
 // src/components/special-modals.tsx
 var import_lucide_react9 = require("lucide-react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-function GlassModal({ trigger, title, description, children, open, onOpenChange }) {
+function GlassModal({ trigger, title = "Glass Modal", description, children, open, onOpenChange }) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Dialog, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTrigger, { asChild: true, children: trigger }),
+    trigger && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogContent, { className: "bg-white/10 backdrop-blur-xl border-white/20 shadow-2xl sm:max-w-[425px]", children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTitle, { className: "text-foreground", children: title }),
+        title && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTitle, { className: "text-foreground", children: title }),
         description && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogDescription, { className: "text-muted-foreground", children: description })
       ] }),
       children
     ] })
   ] });
 }
-function AlertModal({ trigger, title, description, onConfirm, children, open, onOpenChange }) {
+function AlertModal({
+  trigger,
+  title = "Are you absolutely sure?",
+  description,
+  onConfirm,
+  onCancel,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  children,
+  open,
+  onOpenChange
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Dialog, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTrigger, { asChild: true, children: trigger }),
+    trigger && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogContent, { className: "sm:max-w-[400px] border-destructive/20", children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogHeader, { className: "flex flex-col items-center text-center sm:text-center", children: [
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10 mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.AlertTriangle, { className: "h-6 w-6 text-destructive" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTitle, { className: "text-xl", children: title }),
+        title && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTitle, { className: "text-xl", children: title }),
         description && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogDescription, { children: description })
       ] }),
       children,
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogFooter, { className: "sm:justify-center flex-col sm:flex-row gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { variant: "outline", className: "w-full sm:w-auto", children: "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { variant: "destructive", onClick: onConfirm, className: "w-full sm:w-auto", children: "Confirm" })
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { variant: "outline", className: "w-full sm:w-auto", onClick: onCancel, children: cancelText }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { variant: "destructive", onClick: onConfirm, className: "w-full sm:w-auto", children: confirmText })
       ] })
     ] })
   ] });
 }
-function SuccessModal({ trigger, title, description, children, open, onOpenChange }) {
+function SuccessModal({
+  trigger,
+  title = "Success!",
+  description,
+  children,
+  open,
+  onOpenChange,
+  confirmText = "Awesome",
+  onConfirm
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Dialog, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTrigger, { asChild: true, children: trigger }),
+    trigger && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogContent, { className: "sm:max-w-[400px] border-green-500/20", children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogHeader, { className: "flex flex-col items-center text-center sm:text-center", children: [
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-500/10 mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.CheckCircle, { className: "h-6 w-6 text-green-500" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTitle, { className: "text-xl", children: title }),
+        title && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTitle, { className: "text-xl", children: title }),
         description && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogDescription, { children: description })
       ] }),
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogFooter, { className: "sm:justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { className: "w-full sm:w-auto bg-green-500 hover:bg-green-600", children: "Awesome" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogFooter, { className: "sm:justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { className: "w-full sm:w-auto bg-green-500 hover:bg-green-600", onClick: onConfirm, children: confirmText }) }) })
     ] })
   ] });
 }
@@ -5188,11 +5208,16 @@ var React23 = __toESM(require("react"));
 var import_lucide_react29 = require("lucide-react");
 var import_framer_motion24 = require("framer-motion");
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var SimpleAccordion = () => {
-  const [open, setOpen] = React23.useState(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "w-full max-w-md border rounded-xl overflow-hidden bg-card/50 backdrop-blur-sm border-border/50", children: [
+var SimpleAccordion = ({
+  title = "Is this library free?",
+  children = "Yes, it is completely free and open source.",
+  defaultOpen = false,
+  className = ""
+}) => {
+  const [open, setOpen] = React23.useState(defaultOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: `w-full max-w-md border rounded-xl overflow-hidden bg-card/50 backdrop-blur-sm border-border/50 ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("button", { onClick: () => setOpen(!open), className: "w-full p-4 flex justify-between items-center hover:bg-muted/50 transition-colors font-medium", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: "Is this library free?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.ChevronDown, { className: `w-4 h-4 transition-transform duration-300 ${open ? "rotate-180" : ""}` })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_framer_motion24.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
@@ -5203,16 +5228,21 @@ var SimpleAccordion = () => {
         exit: { height: 0, opacity: 0 },
         transition: { duration: 0.3, ease: "easeInOut" },
         className: "overflow-hidden",
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "p-4 pt-0 text-sm text-muted-foreground border-t border-border/50 mt-2 pt-2", children: "Yes, it is completely free and open source." })
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "p-4 pt-0 text-sm text-muted-foreground border-t border-border/50 mt-2 pt-2", children })
       }
     ) })
   ] });
 };
-var PlusAccordion = () => {
-  const [open, setOpen] = React23.useState(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "w-full max-w-md border-b border-border/50", children: [
+var PlusAccordion = ({
+  title = "How do I install it?",
+  children = "You can install it via pnpm, npm, or yarn using the CLI.",
+  defaultOpen = false,
+  className = ""
+}) => {
+  const [open, setOpen] = React23.useState(defaultOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: `w-full max-w-md border-b border-border/50 ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("button", { onClick: () => setOpen(!open), className: "w-full py-4 flex justify-between items-center font-medium hover:text-primary transition-colors", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: "How do I install it?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "relative w-4 h-4 flex items-center justify-center", children: [
         /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "absolute w-4 h-0.5 bg-current rounded-full" }),
         /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: `absolute w-0.5 h-4 bg-current rounded-full transition-transform duration-300 ${open ? "rotate-90" : ""}` })
@@ -5226,16 +5256,21 @@ var PlusAccordion = () => {
         exit: { height: 0, opacity: 0 },
         transition: { duration: 0.3, ease: "easeInOut" },
         className: "overflow-hidden",
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-sm text-muted-foreground pb-4", children: "You can install it via pnpm, npm, or yarn using the CLI." })
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "text-sm text-muted-foreground pb-4", children })
       }
     ) })
   ] });
 };
-var NeonAccordion = () => {
-  const [open, setOpen] = React23.useState(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: `w-full max-w-md border rounded-xl overflow-hidden bg-black transition-all duration-300 ${open ? "border-cyan-500 shadow-[0_0_15px_rgba(6,182,212,0.3)]" : "border-neutral-800"}`, children: [
+var NeonAccordion = ({
+  title = "Premium Features",
+  children = "Access to exclusive animated components and premium layouts.",
+  defaultOpen = false,
+  className = ""
+}) => {
+  const [open, setOpen] = React23.useState(defaultOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: `w-full max-w-md border rounded-xl overflow-hidden bg-black transition-all duration-300 ${open ? "border-cyan-500 shadow-[0_0_15px_rgba(6,182,212,0.3)]" : "border-neutral-800"} ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("button", { onClick: () => setOpen(!open), className: "w-full p-4 flex justify-between items-center font-medium text-white", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: open ? "text-cyan-400" : "text-white", children: "Premium Features" }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: open ? "text-cyan-400" : "text-white", children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.ChevronDown, { className: `w-4 h-4 transition-transform duration-300 ${open ? "rotate-180 text-cyan-400" : "text-white"}` })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_framer_motion24.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
@@ -5246,15 +5281,40 @@ var NeonAccordion = () => {
         exit: { height: 0, opacity: 0 },
         transition: { duration: 0.3, ease: "easeInOut" },
         className: "overflow-hidden",
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "p-4 pt-0 text-sm text-neutral-400 border-t border-neutral-800 mt-2 pt-2", children: "Access to exclusive animated components and premium layouts." })
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "p-4 pt-0 text-sm text-neutral-400 border-t border-neutral-800 mt-2 pt-2", children })
       }
     ) })
   ] });
 };
-var BasicModal = () => {
-  const [open, setOpen] = React23.useState(false);
+var BasicModal = ({
+  isOpen: externalOpen,
+  onOpenChange,
+  trigger,
+  title = "Basic Modal",
+  description = "This is a simple modal dialog that can be used for various purposes.",
+  children,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  onConfirm,
+  onCancel,
+  className = ""
+}) => {
+  const [localOpen, setLocalOpen] = React23.useState(false);
+  const open = externalOpen !== void 0 ? externalOpen : localOpen;
+  const setOpen = (val) => {
+    if (onOpenChange) onOpenChange(val);
+    setLocalOpen(val);
+  };
+  const handleConfirm = () => {
+    if (onConfirm) onConfirm();
+    setOpen(false);
+  };
+  const handleCancel = () => {
+    if (onCancel) onCancel();
+    setOpen(false);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: () => setOpen(true), className: "px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:opacity-90 transition-opacity", children: "Open Basic Modal" }),
+    trigger ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { onClick: () => setOpen(true), className: "cursor-pointer inline-block", children: trigger }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: () => setOpen(true), className: "px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:opacity-90 transition-opacity", children: "Open Basic Modal" }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_framer_motion24.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         import_framer_motion24.motion.div,
@@ -5262,7 +5322,7 @@ var BasicModal = () => {
           initial: { opacity: 0 },
           animate: { opacity: 1 },
           exit: { opacity: 0 },
-          onClick: () => setOpen(false),
+          onClick: handleCancel,
           className: "fixed inset-0 bg-black/60 backdrop-blur-sm"
         }
       ),
@@ -5273,14 +5333,15 @@ var BasicModal = () => {
           animate: { scale: 1, opacity: 1 },
           exit: { scale: 0.95, opacity: 0 },
           transition: { type: "spring", damping: 20, stiffness: 300 },
-          className: "bg-background rounded-2xl shadow-xl w-full max-w-md p-6 relative z-10 border border-border/50",
+          className: `bg-background rounded-2xl shadow-xl w-full max-w-md p-6 relative z-10 border border-border/50 ${className}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: () => setOpen(false), className: "absolute top-4 right-4 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.X, { className: "w-4 h-4" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h3", { className: "font-bold text-lg mb-2", children: "Basic Modal" }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-muted-foreground text-sm mb-6", children: "This is a simple modal dialog that can be used for various purposes." }),
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: handleCancel, className: "absolute top-4 right-4 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.X, { className: "w-4 h-4" }) }),
+            title && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h3", { className: "font-bold text-lg mb-2", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-muted-foreground text-sm mb-6", children: description }),
+            children && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-6", children }),
             /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex justify-end gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: () => setOpen(false), className: "px-4 py-2 hover:bg-muted rounded-lg text-sm font-medium transition-colors", children: "Cancel" }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: () => setOpen(false), className: "px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:opacity-90 transition-opacity", children: "Confirm" })
+              cancelText && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: handleCancel, className: "px-4 py-2 hover:bg-muted rounded-lg text-sm font-medium transition-colors", children: cancelText }),
+              confirmText && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: handleConfirm, className: "px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:opacity-90 transition-opacity", children: confirmText })
             ] })
           ]
         }
@@ -5288,10 +5349,36 @@ var BasicModal = () => {
     ] }) })
   ] });
 };
-var InteractiveGlassModal = () => {
-  const [open, setOpen] = React23.useState(false);
+var InteractiveGlassModal = ({
+  isOpen: externalOpen,
+  onOpenChange,
+  trigger,
+  icon = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Star, { className: "w-6 h-6 text-yellow-300" }),
+  title = "Premium Glass Effect",
+  description = "This modal uses full glassmorphism for a stunning visual effect.",
+  children,
+  confirmText = "Upgrade Now",
+  cancelText = "Maybe Later",
+  onConfirm,
+  onCancel,
+  className = ""
+}) => {
+  const [localOpen, setLocalOpen] = React23.useState(false);
+  const open = externalOpen !== void 0 ? externalOpen : localOpen;
+  const setOpen = (val) => {
+    if (onOpenChange) onOpenChange(val);
+    setLocalOpen(val);
+  };
+  const handleConfirm = () => {
+    if (onConfirm) onConfirm();
+    setOpen(false);
+  };
+  const handleCancel = () => {
+    if (onCancel) onCancel();
+    setOpen(false);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: () => setOpen(true), className: "px-4 py-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-lg font-medium hover:bg-white/20 transition-colors", children: "Open Glass Modal" }),
+    trigger ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { onClick: () => setOpen(true), className: "cursor-pointer inline-block", children: trigger }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: () => setOpen(true), className: "px-4 py-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-lg font-medium hover:bg-white/20 transition-colors", children: "Open Glass Modal" }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_framer_motion24.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         import_framer_motion24.motion.div,
@@ -5299,7 +5386,7 @@ var InteractiveGlassModal = () => {
           initial: { opacity: 0 },
           animate: { opacity: 1 },
           exit: { opacity: 0 },
-          onClick: () => setOpen(false),
+          onClick: handleCancel,
           className: "fixed inset-0 bg-black/40 backdrop-blur-md"
         }
       ),
@@ -5310,15 +5397,16 @@ var InteractiveGlassModal = () => {
           animate: { y: 0, opacity: 1 },
           exit: { y: 20, opacity: 0 },
           transition: { type: "spring", damping: 25, stiffness: 400 },
-          className: "bg-white/10 backdrop-blur-xl rounded-2xl shadow-2xl w-full max-w-md p-6 relative z-10 border border-white/20 text-white",
+          className: `bg-white/10 backdrop-blur-xl rounded-2xl shadow-2xl w-full max-w-md p-6 relative z-10 border border-white/20 text-white ${className}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: () => setOpen(false), className: "absolute top-4 right-4 text-white/60 hover:text-white transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.X, { className: "w-4 h-4" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "w-12 h-12 bg-white/10 rounded-full flex items-center justify-center mb-4 border border-white/20", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Star, { className: "w-6 h-6 text-yellow-300" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h3", { className: "font-bold text-xl mb-2", children: "Premium Glass Effect" }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-white/70 text-sm mb-6", children: "This modal uses full glassmorphism for a stunning visual effect." }),
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: handleCancel, className: "absolute top-4 right-4 text-white/60 hover:text-white transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.X, { className: "w-4 h-4" }) }),
+            icon && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "w-12 h-12 bg-white/10 rounded-full flex items-center justify-center mb-4 border border-white/20", children: icon }),
+            title && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h3", { className: "font-bold text-xl mb-2", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-white/70 text-sm mb-6", children: description }),
+            children && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-6", children }),
             /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex justify-end gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: () => setOpen(false), className: "px-4 py-2 hover:bg-white/5 rounded-lg text-sm font-medium transition-colors", children: "Maybe Later" }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: () => setOpen(false), className: "px-4 py-2 bg-white text-black rounded-lg text-sm font-medium hover:bg-white/90 transition-colors", children: "Upgrade Now" })
+              cancelText && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: handleCancel, className: "px-4 py-2 hover:bg-white/5 rounded-lg text-sm font-medium transition-colors", children: cancelText }),
+              confirmText && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: handleConfirm, className: "px-4 py-2 bg-white text-black rounded-lg text-sm font-medium hover:bg-white/90 transition-colors", children: confirmText })
             ] })
           ]
         }
@@ -5326,10 +5414,36 @@ var InteractiveGlassModal = () => {
     ] }) })
   ] });
 };
-var DangerModal = () => {
-  const [open, setOpen] = React23.useState(false);
+var DangerModal = ({
+  isOpen: externalOpen,
+  onOpenChange,
+  trigger,
+  icon = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.X, { className: "w-8 h-8" }),
+  title = "Are you absolutely sure?",
+  description = "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
+  children,
+  confirmText = "Delete",
+  cancelText = "Cancel",
+  onConfirm,
+  onCancel,
+  className = ""
+}) => {
+  const [localOpen, setLocalOpen] = React23.useState(false);
+  const open = externalOpen !== void 0 ? externalOpen : localOpen;
+  const setOpen = (val) => {
+    if (onOpenChange) onOpenChange(val);
+    setLocalOpen(val);
+  };
+  const handleConfirm = () => {
+    if (onConfirm) onConfirm();
+    setOpen(false);
+  };
+  const handleCancel = () => {
+    if (onCancel) onCancel();
+    setOpen(false);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: () => setOpen(true), className: "px-4 py-2 bg-destructive text-destructive-foreground rounded-lg font-medium hover:opacity-90 transition-opacity", children: "Delete Account" }),
+    trigger ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { onClick: () => setOpen(true), className: "cursor-pointer inline-block", children: trigger }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: () => setOpen(true), className: "px-4 py-2 bg-destructive text-destructive-foreground rounded-lg font-medium hover:opacity-90 transition-opacity", children: "Delete Account" }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_framer_motion24.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         import_framer_motion24.motion.div,
@@ -5337,7 +5451,7 @@ var DangerModal = () => {
           initial: { opacity: 0 },
           animate: { opacity: 1 },
           exit: { opacity: 0 },
-          onClick: () => setOpen(false),
+          onClick: handleCancel,
           className: "fixed inset-0 bg-black/60 backdrop-blur-sm"
         }
       ),
@@ -5348,16 +5462,17 @@ var DangerModal = () => {
           animate: { rotate: 0, scale: 1, opacity: 1 },
           exit: { rotate: -5, scale: 0.9, opacity: 0 },
           transition: { type: "spring", damping: 20, stiffness: 300 },
-          className: "bg-background rounded-2xl shadow-xl w-full max-w-md overflow-hidden relative z-10 border border-destructive/20",
+          className: `bg-background rounded-2xl shadow-xl w-full max-w-md overflow-hidden relative z-10 border border-destructive/20 ${className}`,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "p-6 text-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "w-16 h-16 bg-destructive/10 text-destructive rounded-full flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.X, { className: "w-8 h-8" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h3", { className: "font-bold text-xl mb-2", children: "Are you absolutely sure?" }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-muted-foreground text-sm", children: "This action cannot be undone. This will permanently delete your account and remove your data from our servers." })
+              icon && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "w-16 h-16 bg-destructive/10 text-destructive rounded-full flex items-center justify-center mx-auto mb-4", children: icon }),
+              title && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h3", { className: "font-bold text-xl mb-2", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-muted-foreground text-sm", children: description }),
+              children && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mt-4", children })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex border-t border-border/50 bg-muted/50", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: () => setOpen(false), className: "flex-1 py-3 font-medium hover:bg-muted transition-colors border-r border-border/50", children: "Cancel" }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: () => setOpen(false), className: "flex-1 py-3 font-medium text-destructive hover:bg-destructive/10 transition-colors", children: "Delete" })
+              cancelText && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: handleCancel, className: "flex-1 py-3 font-medium hover:bg-muted transition-colors border-r border-border/50", children: cancelText }),
+              confirmText && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", { onClick: handleConfirm, className: "flex-1 py-3 font-medium text-destructive hover:bg-destructive/10 transition-colors", children: confirmText })
             ] })
           ]
         }
@@ -7129,7 +7244,13 @@ function MusicPlayer({ title, artist, album, className }) {
     ] })
   ] });
 }
-function ImageCompare({ leftLabel = "Before", rightLabel = "After", className }) {
+function ImageCompare({
+  leftImage,
+  rightImage,
+  leftLabel = "Before",
+  rightLabel = "After",
+  className
+}) {
   const [position, setPosition] = React30.useState(50);
   const containerRef = React30.useRef(null);
   const handleMove = (e) => {
@@ -7138,15 +7259,38 @@ function ImageCompare({ leftLabel = "Before", rightLabel = "After", className })
     const x = (e.clientX - rect.left) / rect.width * 100;
     setPosition(Math.max(0, Math.min(100, x)));
   };
+  const handleTouchMove = (e) => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    if (e.touches[0]) {
+      const x = (e.touches[0].clientX - rect.left) / rect.width * 100;
+      setPosition(Math.max(0, Math.min(100, x)));
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     "div",
     {
       ref: containerRef,
       className: cn("relative aspect-video rounded-xl overflow-hidden cursor-col-resize select-none", className),
       onMouseMove: handleMove,
+      onTouchMove: handleTouchMove,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "absolute inset-0 bg-gradient-to-br from-slate-600 to-slate-800" }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "absolute inset-0 bg-gradient-to-br from-violet-500 to-pink-500", style: { clipPath: `inset(0 ${100 - position}% 0 0)` } }),
+        rightImage ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { src: rightImage, alt: rightLabel, className: "absolute inset-0 w-full h-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "absolute inset-0 bg-gradient-to-br from-slate-600 to-slate-800" }),
+        leftImage ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          "img",
+          {
+            src: leftImage,
+            alt: leftLabel,
+            className: "absolute inset-0 w-full h-full object-cover",
+            style: { clipPath: `inset(0 ${100 - position}% 0 0)` }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          "div",
+          {
+            className: "absolute inset-0 bg-gradient-to-br from-violet-500 to-pink-500",
+            style: { clipPath: `inset(0 ${100 - position}% 0 0)` }
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "absolute top-0 bottom-0", style: { left: `${position}%` }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "absolute top-0 bottom-0 w-0.5 bg-white shadow-lg -translate-x-1/2" }),
           /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-white shadow-lg flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("svg", { className: "w-4 h-4 text-slate-700", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 9l4-4 4 4m0 6l-4 4-4-4" }) }) })