@k3-universe/react-kit 0.0.30 → 0.0.31

package/dist/index.js

@@ -45709,16 +45709,22 @@ function Login({
   forgotPasswordHref,
   rightImageSrc,
   rightImageAlt = "Login image",
+  showRightImage = true,
   className,
   continueWith,
   children
 }) {
+  const shouldRenderRightColumn = showRightImage;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: ["grid min-h-dvh grid-cols-1 md:grid-cols-2", className].filter(Boolean).join(" "),
+      className: [
+        "mx-auto grid min-h-dvh w-full max-w-[1920px] grid-cols-1 lg:min-h-[768px]",
+        shouldRenderRightColumn ? "lg:grid-cols-[minmax(0,_1fr)_minmax(384px,_1fr)]" : null,
+        className
+      ].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-6 md:p-10", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-0 items-center justify-center p-6 sm:p-8 lg:p-12", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md", children: [
           /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center", children: [
             /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold leading-tight tracking-tight", children: appTitle }),
             subtitle ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: subtitle }) : null
@@ -45748,7 +45754,7 @@ function Login({
             /* @__PURE__ */ jsx("a", { href: signupHref, className: "underline underline-offset-4", children: signupLinkLabel })
           ] }) : null
         ] }) }),
-        /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: rightImageSrc ? /* @__PURE__ */ jsx(
+        shouldRenderRightColumn ? /* @__PURE__ */ jsx("div", { className: "hidden max-h-[1280px] lg:block", children: rightImageSrc ? /* @__PURE__ */ jsx(
           "img",
           {
             src: rightImageSrc,
@@ -45756,7 +45762,7 @@ function Login({
             className: "h-full w-full object-cover",
             loading: "lazy"
           }
-        ) : /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-muted" }) })
+        ) : /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-muted" }) }) : null
       ]
     }
   );

package/dist/kit/components/login/Login.d.ts

@@ -10,6 +10,7 @@ export type LoginProps = {
     forgotPasswordHref?: string;
     rightImageSrc?: string;
     rightImageAlt?: string;
+    showRightImage?: boolean;
     className?: string;
     continueWith?: React.ReactNode;
     children?: React.ReactNode;
@@ -24,6 +25,6 @@ export type LoginProps = {
  * - Renders a footer with configurable signup CTA
  * - Leaves the actual form implementation to children, so you can use FormBuilder or any custom form
  */
-export declare function Login({ appTitle, subtitle, signupLabel, signupLinkLabel, signupHref, forgotPasswordLabel, forgotPasswordLinkLabel, forgotPasswordHref, rightImageSrc, rightImageAlt, className, continueWith, children, }: LoginProps): import("react/jsx-runtime").JSX.Element;
+export declare function Login({ appTitle, subtitle, signupLabel, signupLinkLabel, signupHref, forgotPasswordLabel, forgotPasswordLinkLabel, forgotPasswordHref, rightImageSrc, rightImageAlt, showRightImage, className, continueWith, children, }: LoginProps): import("react/jsx-runtime").JSX.Element;
 export default Login;
 //# sourceMappingURL=Login.d.ts.map

package/dist/kit/components/login/Login.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Login.d.ts","sourceRoot":"","sources":["../../../../src/kit/components/login/Login.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG;IAEvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAqB,EACrB,QAAQ,EACR,WAAsC,EACtC,eAA2B,EAC3B,UAAU,EACV,mBAA6C,EAC7C,uBAAsC,EACtC,kBAAkB,EAClB,aAAa,EACb,aAA6B,EAC7B,SAAS,EACT,YAAY,EACZ,QAAQ,GACT,EAAE,UAAU,2CA6EZ;AAED,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Login.d.ts","sourceRoot":"","sources":["../../../../src/kit/components/login/Login.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG;IAEvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAqB,EACrB,QAAQ,EACR,WAAsC,EACtC,eAA2B,EAC3B,UAAU,EACV,mBAA6C,EAC7C,uBAAsC,EACtC,kBAAkB,EAClB,aAAa,EACb,aAA6B,EAC7B,cAAqB,EACrB,SAAS,EACT,YAAY,EACZ,QAAQ,GACT,EAAE,UAAU,2CAuFZ;AAED,eAAe,KAAK,CAAC"}

package/dist/kit/themes/clean-slate.css

@@ -1061,6 +1061,10 @@
     max-height: 420px;
   }
 
+  .max-h-\[1280px\] {
+    max-height: 1280px;
+  }
+
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1309,6 +1313,10 @@
     max-width: 150px;
   }
 
+  .max-w-\[1920px\] {
+    max-width: 1920px;
+  }
+
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
@@ -4425,6 +4433,10 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
 
+    .sm\:p-8 {
+      padding: calc(var(--spacing) * 8);
+    }
+
     .sm\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
@@ -4575,10 +4587,6 @@
       gap: calc(var(--spacing) * 1.5);
     }
 
-    .md\:p-10 {
-      padding: calc(var(--spacing) * 10);
-    }
-
     .md\:text-left {
       text-align: left;
     }
@@ -4668,10 +4676,18 @@
       grid-column: span 12 / span 12;
     }
 
+    .lg\:block {
+      display: block;
+    }
+
     .lg\:flex {
       display: flex;
     }
 
+    .lg\:min-h-\[768px\] {
+      min-height: 768px;
+    }
+
     .lg\:grid-cols-1 {
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
@@ -4720,12 +4736,20 @@
       grid-template-columns: repeat(12, minmax(0, 1fr));
     }
 
+    .lg\:grid-cols-\[minmax\(0\,_1fr\)_minmax\(384px\,_1fr\)\] {
+      grid-template-columns: minmax(0, 1fr) minmax(384px, 1fr);
+    }
+
     :where(.lg\:space-x-8 > :not(:last-child)) {
       --tw-space-x-reverse: 0;
       margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
       margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
     }
 
+    .lg\:p-12 {
+      padding: calc(var(--spacing) * 12);
+    }
+
     .lg\:px-8 {
       padding-inline: calc(var(--spacing) * 8);
     }

package/dist/kit/themes/default.css

@@ -1064,6 +1064,10 @@
     max-height: 420px;
   }
 
+  .max-h-\[1280px\] {
+    max-height: 1280px;
+  }
+
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1312,6 +1316,10 @@
     max-width: 150px;
   }
 
+  .max-w-\[1920px\] {
+    max-width: 1920px;
+  }
+
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
@@ -4432,6 +4440,10 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
 
+    .sm\:p-8 {
+      padding: calc(var(--spacing) * 8);
+    }
+
     .sm\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
@@ -4582,10 +4594,6 @@
       gap: calc(var(--spacing) * 1.5);
     }
 
-    .md\:p-10 {
-      padding: calc(var(--spacing) * 10);
-    }
-
     .md\:text-left {
       text-align: left;
     }
@@ -4675,10 +4683,18 @@
       grid-column: span 12 / span 12;
     }
 
+    .lg\:block {
+      display: block;
+    }
+
     .lg\:flex {
       display: flex;
     }
 
+    .lg\:min-h-\[768px\] {
+      min-height: 768px;
+    }
+
     .lg\:grid-cols-1 {
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
@@ -4727,12 +4743,20 @@
       grid-template-columns: repeat(12, minmax(0, 1fr));
     }
 
+    .lg\:grid-cols-\[minmax\(0\,_1fr\)_minmax\(384px\,_1fr\)\] {
+      grid-template-columns: minmax(0, 1fr) minmax(384px, 1fr);
+    }
+
     :where(.lg\:space-x-8 > :not(:last-child)) {
       --tw-space-x-reverse: 0;
       margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
       margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
     }
 
+    .lg\:p-12 {
+      padding: calc(var(--spacing) * 12);
+    }
+
     .lg\:px-8 {
       padding-inline: calc(var(--spacing) * 8);
     }

package/dist/kit/themes/minimal-modern.css

@@ -1061,6 +1061,10 @@
     max-height: 420px;
   }
 
+  .max-h-\[1280px\] {
+    max-height: 1280px;
+  }
+
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1309,6 +1313,10 @@
     max-width: 150px;
   }
 
+  .max-w-\[1920px\] {
+    max-width: 1920px;
+  }
+
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
@@ -4425,6 +4433,10 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
 
+    .sm\:p-8 {
+      padding: calc(var(--spacing) * 8);
+    }
+
     .sm\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
@@ -4575,10 +4587,6 @@
       gap: calc(var(--spacing) * 1.5);
     }
 
-    .md\:p-10 {
-      padding: calc(var(--spacing) * 10);
-    }
-
     .md\:text-left {
       text-align: left;
     }
@@ -4668,10 +4676,18 @@
       grid-column: span 12 / span 12;
     }
 
+    .lg\:block {
+      display: block;
+    }
+
     .lg\:flex {
       display: flex;
     }
 
+    .lg\:min-h-\[768px\] {
+      min-height: 768px;
+    }
+
     .lg\:grid-cols-1 {
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
@@ -4720,12 +4736,20 @@
       grid-template-columns: repeat(12, minmax(0, 1fr));
     }
 
+    .lg\:grid-cols-\[minmax\(0\,_1fr\)_minmax\(384px\,_1fr\)\] {
+      grid-template-columns: minmax(0, 1fr) minmax(384px, 1fr);
+    }
+
     :where(.lg\:space-x-8 > :not(:last-child)) {
       --tw-space-x-reverse: 0;
       margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
       margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
     }
 
+    .lg\:p-12 {
+      padding: calc(var(--spacing) * 12);
+    }
+
     .lg\:px-8 {
       padding-inline: calc(var(--spacing) * 8);
     }

package/dist/kit/themes/spotify.css

@@ -1061,6 +1061,10 @@
     max-height: 420px;
   }
 
+  .max-h-\[1280px\] {
+    max-height: 1280px;
+  }
+
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1309,6 +1313,10 @@
     max-width: 150px;
   }
 
+  .max-w-\[1920px\] {
+    max-width: 1920px;
+  }
+
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
@@ -4425,6 +4433,10 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
 
+    .sm\:p-8 {
+      padding: calc(var(--spacing) * 8);
+    }
+
     .sm\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
@@ -4575,10 +4587,6 @@
       gap: calc(var(--spacing) * 1.5);
     }
 
-    .md\:p-10 {
-      padding: calc(var(--spacing) * 10);
-    }
-
     .md\:text-left {
       text-align: left;
     }
@@ -4668,10 +4676,18 @@
       grid-column: span 12 / span 12;
     }
 
+    .lg\:block {
+      display: block;
+    }
+
     .lg\:flex {
       display: flex;
     }
 
+    .lg\:min-h-\[768px\] {
+      min-height: 768px;
+    }
+
     .lg\:grid-cols-1 {
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
@@ -4720,12 +4736,20 @@
       grid-template-columns: repeat(12, minmax(0, 1fr));
     }
 
+    .lg\:grid-cols-\[minmax\(0\,_1fr\)_minmax\(384px\,_1fr\)\] {
+      grid-template-columns: minmax(0, 1fr) minmax(384px, 1fr);
+    }
+
     :where(.lg\:space-x-8 > :not(:last-child)) {
       --tw-space-x-reverse: 0;
       margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
       margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
     }
 
+    .lg\:p-12 {
+      padding: calc(var(--spacing) * 12);
+    }
+
     .lg\:px-8 {
       padding-inline: calc(var(--spacing) * 8);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k3-universe/react-kit",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/kit/components/login/Login.tsx

@@ -16,6 +16,8 @@ export type LoginProps = {
   // Right-side image URL and alt
   rightImageSrc?: string;
   rightImageAlt?: string;
+  // Explicit toggle to show/hide the right-side visual column
+  showRightImage?: boolean;
   // Optional className for the outer container
   className?: string;
   // Optional continue-with slot (renders below the submit action area)
@@ -45,18 +47,27 @@ export function Login({
   forgotPasswordHref,
   rightImageSrc,
   rightImageAlt = 'Login image',
+  showRightImage = true,
   className,
   continueWith,
   children,
 }: LoginProps) {
+  const shouldRenderRightColumn = showRightImage;
+
   return (
     <div
-      className={['grid min-h-dvh grid-cols-1 md:grid-cols-2', className]
+      className={[
+        'mx-auto grid min-h-dvh w-full max-w-[1920px] grid-cols-1 lg:min-h-[768px]',
+        shouldRenderRightColumn
+          ? 'lg:grid-cols-[minmax(0,_1fr)_minmax(384px,_1fr)]'
+          : null,
+        className,
+      ]
         .filter(Boolean)
         .join(' ')}
     >
       {/* Left column: form section */}
-      <div className="flex items-center justify-center p-6 md:p-10">
+      <div className="flex min-h-0 items-center justify-center p-6 sm:p-8 lg:p-12">
         <div className="w-full max-w-md">
           {/* Title */}
           <div className="mb-6 text-center">
@@ -111,18 +122,20 @@ export function Login({
       </div>
 
       {/* Right column: image */}
-      <div className="hidden md:block">
-        {rightImageSrc ? (
-          <img
-            src={rightImageSrc}
-            alt={rightImageAlt}
-            className="h-full w-full object-cover"
-            loading="lazy"
-          />
-        ) : (
-          <div className="h-full w-full bg-muted" />
-        )}
-      </div>
+      {shouldRenderRightColumn ? (
+        <div className="hidden max-h-[1280px] lg:block">
+          {rightImageSrc ? (
+            <img
+              src={rightImageSrc}
+              alt={rightImageAlt}
+              className="h-full w-full object-cover"
+              loading="lazy"
+            />
+          ) : (
+            <div className="h-full w-full bg-muted" />
+          )}
+        </div>
+      ) : null}
     </div>
   );
 }