@doujins/payments-ui 0.1.11 → 0.1.13

package/dist/index.js

@@ -509,7 +509,7 @@ var Input = React15.forwardRef(
       {
         type,
         className: cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "placeholder:text-white/30 flex h-9 w-full rounded-md border border-white/30 bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium font-light file:text-foreground text-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         ),
         ref,
@@ -520,7 +520,7 @@ var Input = React15.forwardRef(
 );
 Input.displayName = "Input";
 var labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
 var Label = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
@@ -538,7 +538,7 @@ var SelectTrigger = React15.forwardRef(({ className, children, ...props }, ref)
   {
     ref,
     className: cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full cursor-pointer items-center justify-between rounded-md border border-white/30 bg-transparent px-3 py-1 text-sm placeholder:text-white/30 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-current",
       className
     ),
     ...props,
@@ -575,33 +575,25 @@ var SelectScrollDownButton = React15.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React15.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React15.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
     className: cn(
-      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      "relative z-[200] max-h-64 overflow-y-auto overflow-x-hidden rounded-md border border-white/20 bg-background-regular text-foreground shadow-lg backdrop-blur-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "w-[var(--radix-select-trigger-width)]",
       className
     ),
     position,
+    sideOffset: 4,
     ...props,
     children: [
       /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx(
-        SelectPrimitive.Viewport,
-        {
-          className: cn(
-            "p-1",
-            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          ),
-          children
-        }
-      ),
+      /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "p-1", children }),
       /* @__PURE__ */ jsx(SelectScrollDownButton, {})
     ]
   }
-) }));
+));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 var SelectLabel = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
@@ -617,13 +609,13 @@ var SelectItem = React15.forwardRef(({ className, children, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-foreground/10 focus:bg-foreground/10 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) })
     ]
   }
 ));
@@ -814,7 +806,8 @@ var CardDetailsForm = ({
     visible
   ]);
   const validate = () => {
-    if (!firstName.trim() || !lastName.trim() || !address1.trim() || !city.trim() || !postalCode.trim() || !country.trim() || !email.trim()) {
+    const emailRequired = !defaultValues?.email && !config.defaultUser?.email;
+    if (!firstName.trim() || !lastName.trim() || !address1.trim() || !city.trim() || !postalCode.trim() || !country.trim() || emailRequired && !email.trim()) {
       setLocalError("Please complete all required billing fields.");
       return false;
     }
@@ -832,7 +825,8 @@ var CardDetailsForm = ({
     window.CollectJS.startPaymentRequest();
   };
   const errorMessage = localError ?? externalError;
-  const collectFieldClass = "relative flex h-11 w-full items-center overflow-hidden rounded-md border border-border/60 bg-background/40 px-3 text-sm text-foreground";
+  const collectFieldClass = "relative flex h-9 w-full items-center overflow-hidden rounded-md border border-white/30 bg-transparent px-3 text-sm text-foreground";
+  const showEmailField = !defaultValues?.email && !config.defaultUser?.email;
   return /* @__PURE__ */ jsxs(
     "form",
     {
@@ -867,7 +861,7 @@ var CardDetailsForm = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        showEmailField && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
           /* @__PURE__ */ jsx(
             Input,
@@ -956,7 +950,7 @@ var CardDetailsForm = ({
           Button,
           {
             type: "submit",
-            className: "w-full",
+            className: "w-full border-0 bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50",
             disabled: submitting || submitDisabled || isTokenizing,
             children: submitting || isTokenizing ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
@@ -2254,7 +2248,7 @@ var SubscriptionCheckoutModal = ({
     /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(
       DialogContent,
       {
-        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",
+        className: "z-[100] max-w-xl 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__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: "Checkout" }) }),
           /* @__PURE__ */ jsx("div", { className: "space-y-4", children: !priceId ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-center px-3 py-2 text-sm text-destructive", children: [
@@ -3171,7 +3165,7 @@ var PaymentMethodsSection = ({
     /* @__PURE__ */ jsx(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxs(
       DialogContent,
       {
-        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",
+        className: "z-[100] max-w-xl 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__ */ jsxs(DialogHeader, { children: [
             /* @__PURE__ */ jsx(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: t.addNewCard }),