mailsentry-auth 0.2.0 → 0.2.1

package/dist/index.js

@@ -747,6 +747,8 @@ var useStepRenderer = () => {
 
 
 
+var _image = require('next/image'); var _image2 = _interopRequireDefault(_image);
+var _classvarianceauthority = require('class-variance-authority');
 
 // src/hooks/useAuthActionHandler.ts
 
@@ -2870,6 +2872,37 @@ var useAuthFlowModal = () => {
 
 // src/components/auth/auth-flow-container.tsx
 
+var containerVariants = _classvarianceauthority.cva.call(void 0, "w-full h-screen p-6 overflow-hidden", {
+  variants: {
+    layout: {
+      withImage: "",
+      fullWidth: "max-w-[600px] mx-auto"
+    }
+  },
+  defaultVariants: {
+    layout: "fullWidth"
+  }
+});
+var formContentVariants = _classvarianceauthority.cva.call(void 0, "overflow-auto w-full", {
+  variants: {
+    centered: {
+      true: "flex justify-center items-center"
+    }
+  },
+  defaultVariants: {
+    centered: true
+  }
+});
+var imageContainerVariants = _classvarianceauthority.cva.call(void 0, "h-screen overflow-hidden relative", {
+  variants: {
+    gradient: {
+      purple: ""
+    }
+  },
+  defaultVariants: {
+    gradient: "purple"
+  }
+});
 function AuthFlowContainer({
   variant = "default" /* DEFAULT */,
   backgroundImage
@@ -3062,53 +3095,54 @@ function AuthFlowContainer({
       onClick: goBackToHome
     };
   }, [stepperState.currentStep, stepperActions, clearAll, goBackToHome]);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _antd.Row, { className: "h-dvh", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Col, { xs: 24, lg: showRightSideImage ? 12 : 24, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Flex, { vertical: true, justify: "center", align: "center", style: { width: "100%" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Col, { xs: 22, sm: 20, md: 16, lg: variant === "with_image" /* WITH_IMAGE */ ? 24 : 16, xl: variant === "with_image" /* WITH_IMAGE */ ? 24 : 14, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _antd.Space, { direction: "vertical", className: "h-dvh justify-between p-4", children: [
-      config2.showBackToHome && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Flex, { justify: "flex-start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _antd.Button,
-        {
-          onClick: topButton.onClick,
-          shape: "round",
-          size: "large",
-          type: "primary",
-          ghost: true,
-          children: topButton.label
-        }
-      ) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectedComponent, __spreadValues({}, stepProps)),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _antd.Flex, { align: "center", gap: "small", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _antd.Button,
-          {
-            type: "text",
-            icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _icons.ArrowLeftOutlined, {}),
-            onClick: handleBack,
-            disabled: stepperState.isFirstStep
-          }
-        ),
-        config2.showSteps && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Col, { flex: "auto", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _antd.Steps,
-          {
-            current: currentVisibleStepIndex >= 0 ? currentVisibleStepIndex : 0,
-            labelPlacement: "vertical",
-            size: "small",
-            items: visibleSteps.map((step) => ({
-              title: step.title
-            }))
-          }
-        ) })
-      ] })
-    ] }) }) }) }),
-    showRightSideImage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Col, { xs: 0, lg: 12, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Flex, { justify: "center", align: "center", style: { height: "100%", background: "#f5f5f5" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _antd.Image,
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _antd.Row, { className: "m-0 h-screen", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Col, { xs: 24, lg: showRightSideImage ? 10 : 24, className: "flex flex-col", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _antd.Flex,
+      {
+        vertical: true,
+        justify: "space-between",
+        className: containerVariants({
+          layout: showRightSideImage ? "withImage" : "fullWidth"
+        }),
+        children: [
+          config2.showBackToHome && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Flex, { justify: "flex-start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Button, { onClick: topButton.onClick, shape: "round", size: "large", type: "primary", ghost: true, children: topButton.label }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Flex, { flex: 1, justify: "center", align: "center", className: formContentVariants(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Space, { direction: "vertical", className: "w-full max-w-[480px]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectedComponent, __spreadValues({}, stepProps)) }) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _antd.Flex, { align: "center", gap: "small", className: "mt-4", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _antd.Button,
+              {
+                type: "text",
+                icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _icons.ArrowLeftOutlined, {}),
+                onClick: handleBack,
+                disabled: stepperState.isFirstStep
+              }
+            ),
+            config2.showSteps && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Flex, { flex: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _antd.Steps,
+              {
+                current: currentVisibleStepIndex >= 0 ? currentVisibleStepIndex : 0,
+                labelPlacement: "vertical",
+                size: "small",
+                className: "w-full",
+                items: visibleSteps.map((step) => ({
+                  title: step.title
+                }))
+              }
+            ) })
+          ] })
+        ]
+      }
+    ) }),
+    showRightSideImage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Col, { xs: 0, lg: 14, className: imageContainerVariants(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Flex, { justify: "center", align: "center", className: "absolute top-0 left-0 w-full h-full p-10", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _antd.Space, { className: "relative w-full h-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _image2.default,
       {
         src: backgroundImage,
-        alt: "Authentication Progress",
-        preview: false,
-        width: "100%",
-        style: { maxHeight: "80vh", objectFit: "contain" }
+        alt: "Authentication",
+        fill: true,
+        className: "rounded-lg object-cover",
+        priority: true
       }
-    ) }) })
+    ) }) }) })
   ] });
 }
 

package/dist/index.mjs

@@ -745,8 +745,10 @@ var useStepRenderer = () => {
 
 // src/components/auth/auth-flow-container.tsx
 import React3, { useState as useState5 } from "react";
-import { Steps, Col, Button as Button5, Flex as Flex3, Row, Image, Space as Space4 } from "antd";
+import { Steps, Col, Button as Button5, Flex as Flex3, Row, Space as Space4 } from "antd";
 import { ArrowLeftOutlined as ArrowLeftOutlined3 } from "@ant-design/icons";
+import Image from "next/image";
+import { cva } from "class-variance-authority";
 
 // src/hooks/useAuthActionHandler.ts
 import { useState as useState2, useCallback } from "react";
@@ -2870,6 +2872,37 @@ var useAuthFlowModal = () => {
 
 // src/components/auth/auth-flow-container.tsx
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var containerVariants = cva("w-full h-screen p-6 overflow-hidden", {
+  variants: {
+    layout: {
+      withImage: "",
+      fullWidth: "max-w-[600px] mx-auto"
+    }
+  },
+  defaultVariants: {
+    layout: "fullWidth"
+  }
+});
+var formContentVariants = cva("overflow-auto w-full", {
+  variants: {
+    centered: {
+      true: "flex justify-center items-center"
+    }
+  },
+  defaultVariants: {
+    centered: true
+  }
+});
+var imageContainerVariants = cva("h-screen overflow-hidden relative", {
+  variants: {
+    gradient: {
+      purple: ""
+    }
+  },
+  defaultVariants: {
+    gradient: "purple"
+  }
+});
 function AuthFlowContainer({
   variant = "default" /* DEFAULT */,
   backgroundImage
@@ -3062,53 +3095,54 @@ function AuthFlowContainer({
       onClick: goBackToHome
     };
   }, [stepperState.currentStep, stepperActions, clearAll, goBackToHome]);
-  return /* @__PURE__ */ jsxs7(Row, { className: "h-dvh", children: [
-    /* @__PURE__ */ jsx12(Col, { xs: 24, lg: showRightSideImage ? 12 : 24, children: /* @__PURE__ */ jsx12(Flex3, { vertical: true, justify: "center", align: "center", style: { width: "100%" }, children: /* @__PURE__ */ jsx12(Col, { xs: 22, sm: 20, md: 16, lg: variant === "with_image" /* WITH_IMAGE */ ? 24 : 16, xl: variant === "with_image" /* WITH_IMAGE */ ? 24 : 14, children: /* @__PURE__ */ jsxs7(Space4, { direction: "vertical", className: "h-dvh justify-between p-4", children: [
-      config2.showBackToHome && /* @__PURE__ */ jsx12(Flex3, { justify: "flex-start", children: /* @__PURE__ */ jsx12(
-        Button5,
-        {
-          onClick: topButton.onClick,
-          shape: "round",
-          size: "large",
-          type: "primary",
-          ghost: true,
-          children: topButton.label
-        }
-      ) }),
-      /* @__PURE__ */ jsx12(SelectedComponent, __spreadValues({}, stepProps)),
-      /* @__PURE__ */ jsxs7(Flex3, { align: "center", gap: "small", children: [
-        /* @__PURE__ */ jsx12(
-          Button5,
-          {
-            type: "text",
-            icon: /* @__PURE__ */ jsx12(ArrowLeftOutlined3, {}),
-            onClick: handleBack,
-            disabled: stepperState.isFirstStep
-          }
-        ),
-        config2.showSteps && /* @__PURE__ */ jsx12(Col, { flex: "auto", children: /* @__PURE__ */ jsx12(
-          Steps,
-          {
-            current: currentVisibleStepIndex >= 0 ? currentVisibleStepIndex : 0,
-            labelPlacement: "vertical",
-            size: "small",
-            items: visibleSteps.map((step) => ({
-              title: step.title
-            }))
-          }
-        ) })
-      ] })
-    ] }) }) }) }),
-    showRightSideImage && /* @__PURE__ */ jsx12(Col, { xs: 0, lg: 12, children: /* @__PURE__ */ jsx12(Flex3, { justify: "center", align: "center", style: { height: "100%", background: "#f5f5f5" }, children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs7(Row, { className: "m-0 h-screen", children: [
+    /* @__PURE__ */ jsx12(Col, { xs: 24, lg: showRightSideImage ? 10 : 24, className: "flex flex-col", children: /* @__PURE__ */ jsxs7(
+      Flex3,
+      {
+        vertical: true,
+        justify: "space-between",
+        className: containerVariants({
+          layout: showRightSideImage ? "withImage" : "fullWidth"
+        }),
+        children: [
+          config2.showBackToHome && /* @__PURE__ */ jsx12(Flex3, { justify: "flex-start", children: /* @__PURE__ */ jsx12(Button5, { onClick: topButton.onClick, shape: "round", size: "large", type: "primary", ghost: true, children: topButton.label }) }),
+          /* @__PURE__ */ jsx12(Flex3, { flex: 1, justify: "center", align: "center", className: formContentVariants(), children: /* @__PURE__ */ jsx12(Space4, { direction: "vertical", className: "w-full max-w-[480px]", children: /* @__PURE__ */ jsx12(SelectedComponent, __spreadValues({}, stepProps)) }) }),
+          /* @__PURE__ */ jsxs7(Flex3, { align: "center", gap: "small", className: "mt-4", children: [
+            /* @__PURE__ */ jsx12(
+              Button5,
+              {
+                type: "text",
+                icon: /* @__PURE__ */ jsx12(ArrowLeftOutlined3, {}),
+                onClick: handleBack,
+                disabled: stepperState.isFirstStep
+              }
+            ),
+            config2.showSteps && /* @__PURE__ */ jsx12(Flex3, { flex: 1, children: /* @__PURE__ */ jsx12(
+              Steps,
+              {
+                current: currentVisibleStepIndex >= 0 ? currentVisibleStepIndex : 0,
+                labelPlacement: "vertical",
+                size: "small",
+                className: "w-full",
+                items: visibleSteps.map((step) => ({
+                  title: step.title
+                }))
+              }
+            ) })
+          ] })
+        ]
+      }
+    ) }),
+    showRightSideImage && /* @__PURE__ */ jsx12(Col, { xs: 0, lg: 14, className: imageContainerVariants(), children: /* @__PURE__ */ jsx12(Flex3, { justify: "center", align: "center", className: "absolute top-0 left-0 w-full h-full p-10", children: /* @__PURE__ */ jsx12(Space4, { className: "relative w-full h-full", children: /* @__PURE__ */ jsx12(
       Image,
       {
         src: backgroundImage,
-        alt: "Authentication Progress",
-        preview: false,
-        width: "100%",
-        style: { maxHeight: "80vh", objectFit: "contain" }
+        alt: "Authentication",
+        fill: true,
+        className: "rounded-lg object-cover",
+        priority: true
       }
-    ) }) })
+    ) }) }) })
   ] });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mailsentry-auth",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Next.js 15 authentication package with multi-step auth flow, cross-tab sync, and Zustand state management",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -48,6 +48,7 @@
     "@react-oauth/google": "^0.13.4",
     "@types/js-cookie": "^3.0.6",
     "antd": "^5.27.0",
+    "class-variance-authority": "^0.7.1",
     "immer": "^10.1.1",
     "js-cookie": "^3.0.5",
     "zustand": "^5.0.8"