@olwiba/ui 0.2.13 → 0.2.14

package/dist/index.d.ts

@@ -335,9 +335,21 @@ interface AuthSectionProps extends AuthFormProps {
     children?: React.ReactNode;
     /** (split layout only) Custom content for the left decorative panel */
     panel?: React.ReactNode;
+    /**
+     * Render inside an existing page frame — one already providing the
+     * background, the horizontal padding, and a navbar and footer.
+     *
+     * Standalone (the default) the section owns the whole viewport, which is
+     * right for an auth screen that is the only thing on the page. It is wrong
+     * the moment there is chrome around it: the padding lands on top of the
+     * frame's own, and `min-h-dvh` guarantees the footer starts below the fold.
+     *
+     * (centered layout only)
+     */
+    framed?: boolean;
     className?: string;
 }
-declare function AuthSection({ layout, children, panel, className, ...formProps }: AuthSectionProps): react_jsx_runtime.JSX.Element;
+declare function AuthSection({ layout, children, panel, framed, className, ...formProps }: AuthSectionProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsSectionProps {
     title: string;

package/dist/index.js

@@ -472,7 +472,24 @@ function AppShell({
   return inner;
 }
 var defaultRenderLink2 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
-function CenteredAuth({ children, brand, className }) {
+function CenteredAuth({ children, brand, framed, className }) {
+  if (framed) {
+    return (
+      // Framed: a page frame is already supplying the background, the page
+      // padding, and — with a navbar and footer around it — the height. All
+      // three have to come off here or they are applied twice: padding inside
+      // padding, and a full-viewport section that pushes the footer below the
+      // fold on every auth screen.
+      //
+      // The card fills the content column on a phone, matching the contact
+      // form, and only takes its reading width once there is room for the
+      // page to centre it.
+      /* @__PURE__ */ jsx("section", { className: cn$1("flex flex-col py-6 sm:py-10", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-none sm:my-auto sm:max-w-md", children: [
+        brand && /* @__PURE__ */ jsx("div", { className: "mb-8 text-center", children: brand }),
+        children
+      ] }) })
+    );
+  }
   return (
     // `min-h-dvh`, not `min-h-screen`: on mobile `100vh` is the viewport with
     // the browser chrome *retracted*, so a screen-height box is always taller
@@ -650,6 +667,7 @@ function AuthSection({
   layout = "centered",
   children,
   panel,
+  framed,
   className,
   ...formProps
 }) {
@@ -659,7 +677,7 @@ function AuthSection({
   }
   const { brand, ...restFormProps } = formProps;
   const form = children ?? /* @__PURE__ */ jsx(DefaultForm, { ...restFormProps });
-  return /* @__PURE__ */ jsx(CenteredAuth, { brand, className, children: form });
+  return /* @__PURE__ */ jsx(CenteredAuth, { brand, framed, className, children: form });
 }
 function SettingsSection({ title, description, children, danger = false, className }) {
   return /* @__PURE__ */ jsxs("div", { className: cn$1("grid grid-cols-1 gap-x-8 gap-y-6 py-10 sm:grid-cols-3", className), children: [