@doujins/payments-ui 0.1.11 → 0.1.12

package/dist/index.cjs

@@ -542,7 +542,7 @@ var Input = React15__namespace.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,
@@ -553,7 +553,7 @@ var Input = React15__namespace.forwardRef(
 );
 Input.displayName = "Input";
 var labelVariants = classVarianceAuthority.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__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   LabelPrimitive__namespace.Root,
@@ -571,7 +571,7 @@ var SelectTrigger = React15__namespace.forwardRef(({ className, children, ...pro
   {
     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,
@@ -613,7 +613,7 @@ var SelectContent = React15__namespace.forwardRef(({ className, children, positi
   {
     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]",
+      "relative z-[200] max-h-64 min-w-[8rem] 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 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",
       className
     ),
@@ -650,13 +650,13 @@ var SelectItem = React15__namespace.forwardRef(({ className, children, ...props
   {
     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__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) })
     ]
   }
 ));
@@ -847,7 +847,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;
     }
@@ -865,7 +866,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__ */ jsxRuntime.jsxs(
     "form",
     {
@@ -900,7 +902,7 @@ var CardDetailsForm = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        showEmailField && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Input,
@@ -989,7 +991,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
@@ -2287,7 +2289,7 @@ var SubscriptionCheckoutModal = ({
     /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.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__ */ 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: [
@@ -3204,7 +3206,7 @@ var PaymentMethodsSection = ({
     /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(DialogHeader, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: t.addNewCard }),