@doujins/payments-ui 0.1.10 → 0.1.11

package/dist/index.cjs

@@ -2099,8 +2099,8 @@ var SubscriptionSuccessDialog = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: (value) => {
     if (!value) onClose();
-  }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-full max-w-md overflow-hidden border bg-background/95 p-0 shadow-2xl", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gradient-to-b from-primary/25 via-primary/10 to-background px-6 py-8 text-center", children: [
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "z-[100] w-full max-w-md overflow-hidden border border-white/20 p-0 backdrop-blur-xl bg-background-regular shadow-2xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gradient-to-b from-primary/25 via-primary/10 to-transparent px-6 py-8 text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-background/60", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-10 w-10 text-primary" }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "text-2xl font-semibold text-foreground", children: "Subscription activated" }),
@@ -2115,7 +2115,7 @@ var SubscriptionSuccessDialog = ({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "w-full", onClick: onClose, children: "Continue exploring" }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "w-full border-0 bg-emerald-600 text-white hover:bg-emerald-500", onClick: onClose, children: "Continue exploring" }) })
   ] }) });
 };
 var useSubscriptionActions = () => {
@@ -2287,9 +2287,9 @@ var SubscriptionCheckoutModal = ({
     /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
       DialogContent,
       {
-        className: "max-w-3xl max-h-[90vh] overflow-y-auto border-border rounded-md [&::-webkit-scrollbar]:hidden",
+        className: "z-[100] max-w-3xl max-h-[90vh] overflow-y-auto border border-white/20 p-6 backdrop-blur-xl bg-background-regular rounded-md [&::-webkit-scrollbar]:hidden",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Checkout" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: "Checkout" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: !priceId ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-center px-3 py-2 text-sm text-destructive", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }),
             " ",
@@ -2338,8 +2338,8 @@ var wallets = [
 ];
 var WalletModal = ({ open, onOpenChange }) => {
   const [expandedWallet, setExpandedWallet] = React15.useState(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-md border bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "border-b bg-gradient-to-r from-primary/10 via-background to-background px-6 py-5 text-left", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "z-[100] w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-md border border-white/20 p-0 backdrop-blur-xl bg-background-regular shadow-2xl [&::-webkit-scrollbar]:hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "border-b border-white/10 bg-gradient-to-r from-primary/10 via-transparent to-transparent px-6 py-5 text-left", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-5 w-5 text-primary" }),
         " Connect a Solana wallet"
@@ -2350,7 +2350,7 @@ var WalletModal = ({ open, onOpenChange }) => {
       wallets.map((wallet) => /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "rounded-2xl border bg-background/80 p-4 shadow-sm",
+          className: "rounded-2xl border border-white/20 bg-foreground/5 p-4 shadow-sm",
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
@@ -2375,7 +2375,7 @@ var WalletModal = ({ open, onOpenChange }) => {
                 wallet.name,
                 " wallet, approve the connection request, and confirm the signature prompt to finish linking."
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Button, { className: "w-full", variant: "outline", disabled: true, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Button, { className: "w-full border-white/20 bg-transparent text-foreground hover:bg-foreground/10 hover:text-foreground", variant: "outline", disabled: true, children: [
                 "Connect with ",
                 wallet.name,
                 " (coming soon)"
@@ -2385,7 +2385,7 @@ var WalletModal = ({ open, onOpenChange }) => {
         },
         wallet.id
       )),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl border bg-muted/10 p-4 text-xs text-muted-foreground", children: "Don\u2019t see your wallet? Additional providers will be added soon. Contact support if you need manual verification." })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl border border-white/20 bg-foreground/5 p-4 text-xs text-muted-foreground", children: "Don't see your wallet? Additional providers will be added soon. Contact support if you need manual verification." })
     ] })
   ] }) });
 };
@@ -2821,9 +2821,9 @@ var CancelMembershipDialog = ({
       " ",
       t.buttonLabel
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "max-h-[90vh] overflow-y-auto rounded-md border border-border bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "z-[100] max-h-[90vh] overflow-y-auto rounded-md border border-white/20 p-6 backdrop-blur-xl bg-background-regular", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogTitle, { className: "flex items-center gap-2 text-lg font-semibold", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogTitle, { className: "flex items-center gap-2 text-lg font-semibold text-foreground", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { className: "h-5 w-5 text-destructive" }),
           " ",
           t.title
@@ -2838,7 +2838,7 @@ var CancelMembershipDialog = ({
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-4 space-y-2 py-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "cancelReason", className: "text-sm font-medium", children: t.reasonLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "cancelReason", className: "text-sm font-medium text-foreground", children: t.reasonLabel }),
         /* @__PURE__ */ jsxRuntime.jsx(
           Textarea,
           {
@@ -2847,7 +2847,7 @@ var CancelMembershipDialog = ({
             onChange: handleReasonChange,
             placeholder: t.reasonPlaceholder,
             className: cn(
-              "w-full resize-none border-border bg-background",
+              "w-full resize-none border-white/20 bg-foreground/5 text-foreground placeholder:text-muted-foreground",
               showError && "border-destructive"
             ),
             rows: 4,
@@ -2865,11 +2865,11 @@ var CancelMembershipDialog = ({
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { className: "mt-6 gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className: "border-border text-muted-foreground", children: t.keepMembership }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className: "border-white/20 bg-transparent text-foreground hover:bg-foreground/10 hover:text-foreground", children: t.keepMembership }) }),
         /* @__PURE__ */ jsxRuntime.jsx(AlertDialogAction, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
-            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90 disabled:opacity-50",
             onClick: handleConfirm,
             disabled: !isReasonValid || isSubmitting,
             children: isSubmitting ? t.cancelling : t.confirmCancellation
@@ -3204,9 +3204,12 @@ var PaymentMethodsSection = ({
     /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(
       DialogContent,
       {
-        className: "max-w-3xl max-h-[90vh] overflow-y-auto border-border rounded-md [&::-webkit-scrollbar]:hidden",
+        className: "z-[100] max-w-3xl max-h-[90vh] overflow-y-auto border border-white/20 p-6 backdrop-blur-xl bg-background-regular rounded-md [&::-webkit-scrollbar]:hidden",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: t.addNewCard }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: t.addNewCard }),
+            /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: "text-muted-foreground", children: t.addNewCardDescription })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             CardDetailsForm,
             {
@@ -3290,59 +3293,59 @@ var WalletDialog = ({ open, onOpenChange }) => {
     onOpenChange(false);
     setForm(initialState);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "max-h-[95vh] max-w-lg overflow-y-auto rounded-2xl border border-border bg-background", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { className: "border-b pb-4", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "z-[100] max-h-[95vh] max-w-lg overflow-y-auto rounded-2xl border border-white/20 p-6 backdrop-blur-xl bg-background-regular", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { className: "border-b border-white/10 pb-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shield, { className: "h-5 w-5 text-primary" }),
-        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { className: "text-center text-base font-semibold uppercase tracking-wide", children: "Secure Payment via Mobius Pay" })
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { className: "text-center text-base font-semibold uppercase tracking-wide text-foreground", children: "Secure Payment via Mobius Pay" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-center text-sm text-muted-foreground", children: "$23 USD per month, cancel at any time." })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-5 px-2 py-4 sm:px-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-muted-foreground", children: "Name on Card" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-foreground", children: "Name on Card" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserRound, { className: "h-4 w-4" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.nameOnCard, onChange: (e) => updateField("nameOnCard", e.target.value), className: "pl-10" })
+            /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.nameOnCard, onChange: (e) => updateField("nameOnCard", e.target.value), className: "pl-10 border-white/20 bg-foreground/5 text-foreground placeholder:text-muted-foreground" })
           ] }),
           errors.nameOnCard && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.nameOnCard })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-muted-foreground", children: "Credit Card Number" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-foreground", children: "Credit Card Number" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-4 w-4" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.cardNumber, onChange: (e) => updateField("cardNumber", e.target.value), className: "pl-10" })
+            /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.cardNumber, onChange: (e) => updateField("cardNumber", e.target.value), className: "pl-10 border-white/20 bg-foreground/5 text-foreground placeholder:text-muted-foreground" })
           ] }),
           errors.cardNumber && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.cardNumber })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-muted-foreground", children: "Expiration" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-foreground", children: "Expiration" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-4 w-4" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.expiration, onChange: (e) => updateField("expiration", e.target.value), className: "pl-10", placeholder: "MM/YY" })
+              /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.expiration, onChange: (e) => updateField("expiration", e.target.value), className: "pl-10 border-white/20 bg-foreground/5 text-foreground placeholder:text-muted-foreground", placeholder: "MM/YY" })
             ] }),
             errors.expiration && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.expiration })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-muted-foreground", children: "CVV" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-foreground", children: "CVV" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.KeyRound, { className: "h-4 w-4" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.cvv, onChange: (e) => updateField("cvv", e.target.value), className: "pl-10" })
+              /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.cvv, onChange: (e) => updateField("cvv", e.target.value), className: "pl-10 border-white/20 bg-foreground/5 text-foreground placeholder:text-muted-foreground" })
             ] }),
             errors.cvv && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.cvv })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 rounded-md border bg-muted/10 p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 rounded-md border border-white/20 bg-foreground/5 p-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { id: "terms-agree", checked: form.termsAccepted, onCheckedChange: (checked) => updateField("termsAccepted", Boolean(checked)) }),
         /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "terms-agree", className: "text-sm text-muted-foreground", children: "By completing this order, I confirm that I am 18 years or older and agree to your privacy policy and terms." })
       ] }),
       errors.termsAccepted && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: errors.termsAccepted }),
       /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", className: "flex-1", children: "Subscribe" }),
-        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className: "flex-1", children: "Close" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", className: "flex-1 border-0 bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50", children: "Subscribe" }),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className: "flex-1 border-white/20 bg-transparent text-foreground hover:bg-foreground/10 hover:text-foreground", children: "Close" }) })
       ] })
     ] })
   ] }) });