@olwiba/ui 0.0.29 → 0.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.0.29",
+  "version": "0.0.32",
   "private": false,
   "type": "module",
   "sideEffects": false,

package/src/app/AuthSection.tsx

@@ -1,15 +1,28 @@
 'use client';
 
 import * as React from 'react';
-import { GalleryVerticalEnd, Building2, ShieldCheck, Sparkles } from 'lucide-react';
-import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, cn } from '@olwiba/cn';
+import { Building2, ShieldCheck, Sparkles } from 'lucide-react';
+import { Badge, CardContent, CardDescription, CardHeader, CardTitle, Label, cn } from '@olwiba/cn';
+import { Button } from '../primitives/Button';
+import { Card } from '../primitives/Card';
+import { Input } from '../primitives/Input';
+import type { AppShellRenderLink } from './AppShell';
+
+const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
+  <a href={href} className={className}>{children}</a>
+);
 
 // ─── Centered layout ──────────────────────────────────────────────────────────
 
-function CenteredAuth({ children }: { children: React.ReactNode }) {
+function CenteredAuth({ children, brand, className }: { children: React.ReactNode; brand?: React.ReactNode; className?: string }) {
   return (
-    <section className="flex h-full min-h-[720px] w-full flex-col items-center justify-center gap-6 rounded-2xl bg-muted p-6 md:p-10">
-      <div className="flex w-full max-w-sm flex-col gap-6">
+    <section className={cn('flex min-h-screen flex-col justify-center bg-background py-12 px-4 sm:px-6 lg:px-8', className)}>
+      {brand && (
+        <div className="mx-auto w-full max-w-md text-center mb-8">
+          {brand}
+        </div>
+      )}
+      <div className="mx-auto w-full max-w-md">
         {children}
       </div>
     </section>
@@ -61,11 +74,14 @@ export interface AuthFormProps {
   /** (signup) Link back to the sign-in page */
   signInHref?: string;
   forgotPasswordHref?: string;
+  /** Brand node — in centered layout renders above the card; in split layout renders inside the card */
   brand?: React.ReactNode;
   /** Error message displayed below the form fields */
   error?: string;
   /** Disables the submit button and shows a loading label */
   loading?: boolean;
+  /** Render prop for links — use to inject framework-native link components (e.g. TanStack Router Link) */
+  renderLink?: AppShellRenderLink;
 }
 
 function DefaultForm({
@@ -78,11 +94,12 @@ function DefaultForm({
   brand,
   error,
   loading,
+  renderLink = defaultRenderLink,
 }: AuthFormProps) {
   const isSignUp = mode === 'signup';
 
   return (
-    <Card className="w-full max-w-md">
+    <Card className="w-full">
       <CardHeader>
         {brand && <div className="mb-2">{brand}</div>}
         <CardTitle>{isSignUp ? 'Create an account' : 'Sign in'}</CardTitle>
@@ -101,17 +118,17 @@ function DefaultForm({
             </div>
           )}
           <div className="space-y-2">
-            <Label htmlFor="auth-email">Email</Label>
+            <Label htmlFor="auth-email">Email address</Label>
             <Input id="auth-email" name="email" type="email" placeholder="name@company.com" autoComplete="email" />
           </div>
           <div className="space-y-2">
             <div className="flex items-center justify-between">
               <Label htmlFor="auth-password">Password</Label>
-              {!isSignUp && forgotPasswordHref && (
-                <a className="text-xs text-muted-foreground underline underline-offset-4 hover:text-foreground" href={forgotPasswordHref}>
-                  Forgot password?
-                </a>
-              )}
+              {!isSignUp && forgotPasswordHref && renderLink({
+                href: forgotPasswordHref,
+                className: 'text-xs text-muted-foreground underline underline-offset-4 hover:text-foreground',
+                children: 'Forgot password?',
+              })}
             </div>
             <Input
               id="auth-password"
@@ -139,17 +156,13 @@ function DefaultForm({
           {isSignUp ? (
             <>
               Already have an account?{' '}
-              <a className="text-foreground underline underline-offset-4" href={signInHref}>
-                Sign in
-              </a>
+              {renderLink({ href: signInHref, className: 'text-foreground underline underline-offset-4', children: 'Sign in' })}
             </>
           ) : (
             signUpHref && (
               <>
                 New here?{' '}
-                <a className="text-foreground underline underline-offset-4" href={signUpHref}>
-                  Create an account
-                </a>
+                {renderLink({ href: signUpHref, className: 'text-foreground underline underline-offset-4', children: 'Create an account' })}
               </>
             )
           )}
@@ -178,9 +191,8 @@ export function AuthSection({
   className,
   ...formProps
 }: AuthSectionProps) {
-  const form = children ?? <DefaultForm {...formProps} />;
-
   if (layout === 'split') {
+    const form = children ?? <DefaultForm {...formProps} />;
     return (
       <div className={cn('h-full', className)}>
         <SplitAuth panel={panel}>{form}</SplitAuth>
@@ -188,9 +200,12 @@ export function AuthSection({
     );
   }
 
+  // Centered: brand renders above the card, not inside it
+  const { brand, ...restFormProps } = formProps;
+  const form = children ?? <DefaultForm {...restFormProps} />;
   return (
-    <div className={cn('h-full', className)}>
-      <CenteredAuth>{form}</CenteredAuth>
-    </div>
+    <CenteredAuth brand={brand} className={className}>
+      {form}
+    </CenteredAuth>
   );
 }