@object-ui/auth 4.6.0 → 4.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @object-ui/auth
 
+## 4.8.0
+
+### Patch Changes
+
+- @object-ui/types@4.8.0
+
+## 4.7.0
+
+### Patch Changes
+
+- @object-ui/types@4.7.0
+
 ## 4.6.0
 
 ### Patch Changes

package/dist/AuthShell.d.ts

@@ -0,0 +1,68 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+/**
+ * Optional brand panel content for the AuthShell aside.
+ * Renders to the right of the form on `md` and above.
+ */
+export interface AuthShellBrandPanel {
+    /** Brand name or product name shown at the top of the panel. */
+    brandName?: React.ReactNode;
+    /** Optional icon/logo node shown beside the brand name. */
+    brandIcon?: React.ReactNode;
+    /** Large headline copy. */
+    headline?: React.ReactNode;
+    /** Short supporting copy below the headline. */
+    subline?: React.ReactNode;
+    /** Optional small caption shown at the bottom of the brand panel. */
+    footer?: React.ReactNode;
+}
+export interface AuthShellProps {
+    /** Slot for the auth form (LoginForm / RegisterForm / etc.) */
+    children: React.ReactNode;
+    /** Brand panel content shown on the right on `md+` screens. Omit to hide. */
+    brand?: AuthShellBrandPanel;
+    /**
+     * Override the wrapper class for the form column.
+     * Defaults to a centred flex column with comfortable padding.
+     */
+    formColumnClassName?: string;
+    /** Override the wrapper class for the brand column. */
+    brandColumnClassName?: string;
+    /**
+     * Optional class for the outermost root element.
+     * Defaults to a full-viewport two-column grid.
+     */
+    className?: string;
+}
+/**
+ * Premium split-screen auth shell. Use as a wrapper around any of the auth
+ * form components (LoginForm, RegisterForm, ForgotPasswordForm) to give the
+ * sign-in experience a polished, branded look.
+ *
+ * The form column appears on the left, the brand panel on the right
+ * (collapsing to form-only on mobile). The brand panel uses a gradient
+ * built from the primary color, plus a soft mesh of radial highlights —
+ * everything rendered with Tailwind utility classes so no extra deps are
+ * needed in the consuming app.
+ *
+ * @example
+ * ```tsx
+ * <AuthShell
+ *   brand={{
+ *     brandName: 'Acme',
+ *     headline: 'Welcome back.',
+ *     subline: 'Sign in to continue building.',
+ *   }}
+ * >
+ *   <LoginForm onSuccess={() => navigate('/dashboard')} />
+ * </AuthShell>
+ * ```
+ */
+export declare function AuthShell({ children, brand, className, formColumnClassName, brandColumnClassName, }: AuthShellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AuthShell.d.ts.map

package/dist/AuthShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthShell.d.ts","sourceRoot":"","sources":["../src/AuthShell.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,gEAAgE;IAChE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,2DAA2D;IAC3D,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gDAAgD;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qEAAqE;IACrE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,+DAA+D;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uDAAuD;IACvD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,mBAAmB,EACnB,oBAAoB,GACrB,EAAE,cAAc,2CAwDhB"}

package/dist/AuthShell.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_BRAND_CLASSES = 'relative hidden overflow-hidden bg-gradient-to-br from-primary via-primary to-primary/80 text-primary-foreground md:flex md:flex-col md:justify-between md:p-12 lg:p-16';
+const DEFAULT_FORM_CLASSES = 'flex min-h-screen flex-col items-center justify-center bg-background px-4 py-10 sm:px-6 md:min-h-0 md:h-screen md:overflow-y-auto';
+const DEFAULT_ROOT_CLASSES = 'grid min-h-screen w-full md:grid-cols-2';
+/**
+ * Premium split-screen auth shell. Use as a wrapper around any of the auth
+ * form components (LoginForm, RegisterForm, ForgotPasswordForm) to give the
+ * sign-in experience a polished, branded look.
+ *
+ * The form column appears on the left, the brand panel on the right
+ * (collapsing to form-only on mobile). The brand panel uses a gradient
+ * built from the primary color, plus a soft mesh of radial highlights —
+ * everything rendered with Tailwind utility classes so no extra deps are
+ * needed in the consuming app.
+ *
+ * @example
+ * ```tsx
+ * <AuthShell
+ *   brand={{
+ *     brandName: 'Acme',
+ *     headline: 'Welcome back.',
+ *     subline: 'Sign in to continue building.',
+ *   }}
+ * >
+ *   <LoginForm onSuccess={() => navigate('/dashboard')} />
+ * </AuthShell>
+ * ```
+ */
+export function AuthShell({ children, brand, className, formColumnClassName, brandColumnClassName, }) {
+    return (_jsxs("div", { className: className ?? DEFAULT_ROOT_CLASSES, children: [_jsx("div", { className: formColumnClassName ?? DEFAULT_FORM_CLASSES, children: _jsx("div", { className: "w-full max-w-md", children: children }) }), brand && (_jsxs("aside", { className: brandColumnClassName ?? DEFAULT_BRAND_CLASSES, "aria-hidden": "true", children: [_jsx("div", { className: "absolute inset-0 opacity-70", style: {
+                            backgroundImage: 'radial-gradient(circle at 18% 22%, rgba(255,255,255,0.22), transparent 45%), radial-gradient(circle at 82% 78%, rgba(255,255,255,0.18), transparent 50%), radial-gradient(circle at 60% 20%, rgba(255,255,255,0.10), transparent 55%)',
+                        } }), _jsx("div", { className: "absolute inset-0 opacity-[0.08]", style: {
+                            backgroundImage: 'linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px)',
+                            backgroundSize: '36px 36px',
+                            maskImage: 'radial-gradient(circle at center, black 30%, transparent 75%)',
+                        } }), _jsx("div", { className: "pointer-events-none absolute -right-24 top-1/3 h-72 w-72 rounded-full bg-white/20 blur-3xl" }), _jsx("div", { className: "pointer-events-none absolute -left-16 bottom-12 h-64 w-64 rounded-full bg-white/10 blur-3xl" }), _jsxs("div", { className: "relative z-10 flex items-center gap-3 text-sm font-medium uppercase tracking-[0.18em] opacity-90", children: [brand.brandIcon && _jsx("span", { "aria-hidden": "true", children: brand.brandIcon }), brand.brandName && _jsx("span", { children: brand.brandName })] }), _jsxs("div", { className: "relative z-10 max-w-md space-y-5", children: [brand.headline && (_jsx("h2", { className: "text-3xl font-semibold leading-tight tracking-tight md:text-4xl", children: brand.headline })), brand.subline && (_jsx("p", { className: "text-base leading-relaxed text-primary-foreground/85 md:text-lg", children: brand.subline }))] }), brand.footer && (_jsx("div", { className: "relative z-10 text-xs text-primary-foreground/70", children: brand.footer }))] }))] }));
+}

package/dist/ForgotPasswordForm.d.ts

@@ -30,14 +30,19 @@ export interface ForgotPasswordFormProps {
     title?: string;
     /** Custom description */
     description?: string;
+    /** Custom icon shown above the title (defaults to a small key disc) */
+    icon?: React.ReactNode;
     /** Custom link component for SPA navigation (e.g. React Router's Link) */
     linkComponent?: React.ComponentType<AuthLinkComponentProps>;
     /** Override default labels for i18n */
     labels?: ForgotPasswordFormLabels;
+    /** Hide the icon disc above the form title. Defaults to false. */
+    hideIcon?: boolean;
 }
 /**
  * Forgot password form component.
- * Sends a password reset email to the user.
+ * Sends a password reset email to the user. Drop inside an `AuthShell`
+ * for a polished split-screen experience.
  *
  * @example
  * ```tsx
@@ -47,5 +52,5 @@ export interface ForgotPasswordFormProps {
  * />
  * ```
  */
-export declare function ForgotPasswordForm({ onSuccess, onError, loginUrl, title, description, linkComponent: LinkComp, labels, }: ForgotPasswordFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function ForgotPasswordForm({ onSuccess, onError, loginUrl, title, description, icon, hideIcon, linkComponent: LinkComp, labels, }: ForgotPasswordFormProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ForgotPasswordForm.d.ts.map

package/dist/ForgotPasswordForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ForgotPasswordForm.d.ts","sourceRoot":"","sources":["../src/ForgotPasswordForm.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,qDAAqD;AACrD,MAAM,WAAW,wBAAwB;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,wBAAwB;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC5D,uCAAuC;IACvC,MAAM,CAAC,EAAE,wBAAwB,CAAC;CACnC;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,OAAO,EACP,QAAmB,EACnB,KAA6B,EAC7B,WAA0F,EAC1F,aAAa,EAAE,QAAsB,EACrC,MAAW,GACZ,EAAE,uBAAuB,2CAwGzB"}
+{"version":3,"file":"ForgotPasswordForm.d.ts","sourceRoot":"","sources":["../src/ForgotPasswordForm.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAYtD,qDAAqD;AACrD,MAAM,WAAW,wBAAwB;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,wBAAwB;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC5D,uCAAuC;IACvC,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,OAAO,EACP,QAAmB,EACnB,KAA6B,EAC7B,WAAyF,EACzF,IAAI,EACJ,QAAgB,EAChB,aAAa,EAAE,QAAsB,EACrC,MAAW,GACZ,EAAE,uBAAuB,2CAyGzB"}

package/dist/ForgotPasswordForm.js

@@ -8,10 +8,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useState } from 'react';
 import { useAuth } from './useAuth';
+import { AUTH_FIELD_LABEL_CLASS, AUTH_INPUT_CLASS, AUTH_LINK_CLASS, AUTH_PRIMARY_BUTTON_CLASS, AuthErrorBanner, AuthFormHeader, AuthMailIcon, AuthSpinner, } from './authStyles';
 const DefaultLink = ({ href, className, children }) => (_jsx("a", { href: href, className: className, children: children }));
+const DefaultKeyIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", className: "h-6 w-6", "aria-hidden": "true", children: _jsx("path", { d: "M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" }) }));
 /**
  * Forgot password form component.
- * Sends a password reset email to the user.
+ * Sends a password reset email to the user. Drop inside an `AuthShell`
+ * for a polished split-screen experience.
  *
  * @example
  * ```tsx
@@ -21,7 +24,7 @@ const DefaultLink = ({ href, className, children }) => (_jsx("a", { href: href,
  * />
  * ```
  */
-export function ForgotPasswordForm({ onSuccess, onError, loginUrl = '/login', title = 'Reset your password', description = 'Enter your email address and we\'ll send you a link to reset your password', linkComponent: LinkComp = DefaultLink, labels = {}, }) {
+export function ForgotPasswordForm({ onSuccess, onError, loginUrl = '/login', title = 'Reset your password', description = "Enter your email address and we'll send you a link to reset your password", icon, hideIcon = false, linkComponent: LinkComp = DefaultLink, labels = {}, }) {
     const { forgotPassword, isLoading } = useAuth();
     const [email, setEmail] = useState('');
     const [error, setError] = useState(null);
@@ -32,7 +35,8 @@ export function ForgotPasswordForm({ onSuccess, onError, loginUrl = '/login', ti
         submitButton: labels.submitButton ?? 'Send Reset Link',
         submittingButton: labels.submittingButton ?? 'Sending...',
         successTitle: labels.successTitle ?? 'Check your email',
-        successDescription: labels.successDescription ?? "We've sent a password reset link to {{email}}. Please check your inbox.",
+        successDescription: labels.successDescription ??
+            "We've sent a password reset link to {{email}}. Please check your inbox.",
         backToSignInText: labels.backToSignInText ?? 'Back to sign in',
         rememberPasswordText: labels.rememberPasswordText ?? 'Remember your password?',
         signInText: labels.signInText ?? 'Sign in',
@@ -55,7 +59,7 @@ export function ForgotPasswordForm({ onSuccess, onError, loginUrl = '/login', ti
         const successMsg = l.successDescription.includes('{{email}}')
             ? l.successDescription.replace('{{email}}', email)
             : `${l.successDescription} ${email}`;
-        return (_jsxs("div", { className: "mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[380px]", children: [_jsxs("div", { className: "flex flex-col space-y-2 text-center", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: l.successTitle }), _jsx("p", { className: "text-sm text-muted-foreground", children: successMsg })] }), loginUrl && (_jsx("p", { className: "px-8 text-center text-sm text-muted-foreground", children: _jsx(LinkComp, { href: loginUrl, className: "text-primary underline-offset-4 hover:underline", children: l.backToSignInText }) }))] }));
+        return (_jsxs("div", { className: "mx-auto flex w-full flex-col justify-center space-y-7 sm:w-[400px]", children: [_jsx(AuthFormHeader, { icon: _jsx("span", { className: "flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-500/10 text-emerald-600 ring-1 ring-emerald-500/15 dark:text-emerald-400", children: _jsx(AuthMailIcon, {}) }), title: l.successTitle, description: successMsg }), loginUrl && (_jsx("p", { className: "text-center text-sm text-muted-foreground", children: _jsxs(LinkComp, { href: loginUrl, className: AUTH_LINK_CLASS, children: ["\u2190 ", l.backToSignInText] }) }))] }));
     }
-    return (_jsxs("div", { className: "mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[380px]", children: [_jsxs("div", { className: "flex flex-col space-y-2 text-center", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: description })] }), _jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [error && (_jsx("div", { className: "rounded-md bg-destructive/15 p-3 text-sm text-destructive", role: "alert", children: error })), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "forgot-email", className: "text-sm font-medium leading-none", children: l.emailLabel }), _jsx("input", { id: "forgot-email", type: "email", placeholder: l.emailPlaceholder, value: email, onChange: (e) => setEmail(e.target.value), required: true, autoComplete: "email", disabled: isLoading, className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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" })] }), _jsx("button", { type: "submit", disabled: isLoading, className: "inline-flex h-10 w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", children: isLoading ? l.submittingButton : l.submitButton })] }), loginUrl && (_jsxs("p", { className: "px-8 text-center text-sm text-muted-foreground", children: [l.rememberPasswordText, ' ', _jsx(LinkComp, { href: loginUrl, className: "text-primary underline-offset-4 hover:underline", children: l.signInText })] }))] }));
+    return (_jsxs("div", { className: "mx-auto flex w-full flex-col justify-center space-y-7 sm:w-[400px]", children: [_jsx(AuthFormHeader, { icon: hideIcon ? undefined : (icon ?? _jsx(DefaultKeyIcon, {})), title: title, description: description }), _jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [error && _jsx(AuthErrorBanner, { message: error }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "forgot-email", className: AUTH_FIELD_LABEL_CLASS, children: l.emailLabel }), _jsx("input", { id: "forgot-email", type: "email", placeholder: l.emailPlaceholder, value: email, onChange: (e) => setEmail(e.target.value), required: true, autoComplete: "email", disabled: isLoading, className: AUTH_INPUT_CLASS })] }), _jsxs("button", { type: "submit", disabled: isLoading, className: AUTH_PRIMARY_BUTTON_CLASS, children: [isLoading && _jsx(AuthSpinner, {}), isLoading ? l.submittingButton : l.submitButton] })] }), loginUrl && (_jsxs("p", { className: "px-8 text-center text-sm text-muted-foreground", children: [l.rememberPasswordText, ' ', _jsx(LinkComp, { href: loginUrl, className: AUTH_LINK_CLASS, children: l.signInText })] }))] }));
 }

package/dist/LoginForm.d.ts

@@ -18,6 +18,8 @@ export interface LoginFormLabels {
     submittingButton?: string;
     noAccountText?: string;
     signUpText?: string;
+    /** Divider label between social sign-in and email/password (defaults to "or") */
+    orText?: string;
 }
 export interface LoginFormProps {
     /** Callback on successful login */
@@ -32,14 +34,19 @@ export interface LoginFormProps {
     title?: string;
     /** Custom description */
     description?: string;
+    /** Custom icon shown above the title (defaults to a small lock disc) */
+    icon?: React.ReactNode;
     /** Custom link component for SPA navigation (e.g. React Router's Link) */
     linkComponent?: React.ComponentType<AuthLinkComponentProps>;
     /** Override default labels for i18n */
     labels?: LoginFormLabels;
+    /** Hide the icon disc above the form title. Defaults to false. */
+    hideIcon?: boolean;
 }
 /**
  * Login form component with email/password authentication.
- * Uses Tailwind CSS utility classes for styling.
+ * Uses Tailwind CSS utility classes for styling. Drop inside an `AuthShell`
+ * for a polished split-screen experience.
  *
  * @example
  * ```tsx
@@ -50,5 +57,5 @@ export interface LoginFormProps {
  * />
  * ```
  */
-export declare function LoginForm({ onSuccess, onError, registerUrl, forgotPasswordUrl, title, description, linkComponent: LinkComp, labels, }: LoginFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function LoginForm({ onSuccess, onError, registerUrl, forgotPasswordUrl, title, description, icon, hideIcon, linkComponent: LinkComp, labels, }: LoginFormProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LoginForm.d.ts.map

package/dist/LoginForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoginForm.d.ts","sourceRoot":"","sources":["../src/LoginForm.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,4CAA4C;AAC5C,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC5D,uCAAuC;IACvC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAMD;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,OAAO,EACP,WAAyB,EACzB,iBAAsC,EACtC,KAAiC,EACjC,WAAyD,EACzD,aAAa,EAAE,QAAsB,EACrC,MAAW,GACZ,EAAE,cAAc,2CA+GhB"}
+{"version":3,"file":"LoginForm.d.ts","sourceRoot":"","sources":["../src/LoginForm.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAYtD,4CAA4C;AAC5C,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC5D,uCAAuC;IACvC,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,OAAO,EACP,WAAyB,EACzB,iBAAsC,EACtC,KAAiC,EACjC,WAAyD,EACzD,IAAI,EACJ,QAAgB,EAChB,aAAa,EAAE,QAAsB,EACrC,MAAW,GACZ,EAAE,cAAc,2CAsHhB"}

package/dist/LoginForm.js

@@ -9,10 +9,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useAuth } from './useAuth';
 import { SocialSignInButtons } from './SocialSignInButtons';
+import { AUTH_FIELD_LABEL_CLASS, AUTH_INPUT_CLASS, AUTH_LINK_CLASS, AUTH_PRIMARY_BUTTON_CLASS, AuthDivider, AuthErrorBanner, AuthFormHeader, AuthSpinner, } from './authStyles';
 const DefaultLink = ({ href, className, children }) => (_jsx("a", { href: href, className: className, children: children }));
+const DefaultLockIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", className: "h-6 w-6", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2" }), _jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }));
 /**
  * Login form component with email/password authentication.
- * Uses Tailwind CSS utility classes for styling.
+ * Uses Tailwind CSS utility classes for styling. Drop inside an `AuthShell`
+ * for a polished split-screen experience.
  *
  * @example
  * ```tsx
@@ -23,7 +26,7 @@ const DefaultLink = ({ href, className, children }) => (_jsx("a", { href: href,
  * />
  * ```
  */
-export function LoginForm({ onSuccess, onError, registerUrl = '/register', forgotPasswordUrl = '/forgot-password', title = 'Sign in to your account', description = 'Enter your email and password to continue', linkComponent: LinkComp = DefaultLink, labels = {}, }) {
+export function LoginForm({ onSuccess, onError, registerUrl = '/register', forgotPasswordUrl = '/forgot-password', title = 'Sign in to your account', description = 'Enter your email and password to continue', icon, hideIcon = false, linkComponent: LinkComp = DefaultLink, labels = {}, }) {
     const { signIn, isLoading } = useAuth();
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
@@ -38,6 +41,7 @@ export function LoginForm({ onSuccess, onError, registerUrl = '/register', forgo
         submittingButton: labels.submittingButton ?? 'Signing in...',
         noAccountText: labels.noAccountText ?? "Don't have an account?",
         signUpText: labels.signUpText ?? 'Sign up',
+        orText: labels.orText ?? 'or',
     };
     const handleSubmit = async (e) => {
         e.preventDefault();
@@ -52,5 +56,5 @@ export function LoginForm({ onSuccess, onError, registerUrl = '/register', forgo
             onError?.(authError);
         }
     };
-    return (_jsxs("div", { className: "mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[380px]", children: [_jsxs("div", { className: "flex flex-col space-y-2 text-center", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: description })] }), _jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsx(SocialSignInButtons, { mode: "sign-in" }), error && (_jsx("div", { className: "rounded-md bg-destructive/15 p-3 text-sm text-destructive", role: "alert", children: error })), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "login-email", className: "text-sm font-medium leading-none", children: l.emailLabel }), _jsx("input", { id: "login-email", type: "email", placeholder: l.emailPlaceholder, value: email, onChange: (e) => setEmail(e.target.value), required: true, autoComplete: "email", disabled: isLoading, className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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" })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { htmlFor: "login-password", className: "text-sm font-medium leading-none", children: l.passwordLabel }), forgotPasswordUrl && (_jsx(LinkComp, { href: forgotPasswordUrl, className: "text-sm text-primary underline-offset-4 hover:underline", children: l.forgotPasswordText }))] }), _jsx("input", { id: "login-password", type: "password", placeholder: l.passwordPlaceholder, value: password, onChange: (e) => setPassword(e.target.value), required: true, autoComplete: "current-password", disabled: isLoading, className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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" })] }), _jsx("button", { type: "submit", disabled: isLoading, className: "inline-flex h-10 w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", children: isLoading ? l.submittingButton : l.submitButton })] }), registerUrl && (_jsxs("p", { className: "px-8 text-center text-sm text-muted-foreground", children: [l.noAccountText, ' ', _jsx(LinkComp, { href: registerUrl, className: "text-primary underline-offset-4 hover:underline", children: l.signUpText })] }))] }));
+    return (_jsxs("div", { className: "mx-auto flex w-full flex-col justify-center space-y-7 sm:w-[400px]", children: [_jsx(AuthFormHeader, { icon: hideIcon ? undefined : (icon ?? _jsx(DefaultLockIcon, {})), title: title, description: description }), _jsxs("div", { className: "space-y-5", children: [_jsx(SocialSignInButtons, { mode: "sign-in" }), _jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsx(AuthDivider, { label: l.orText }), error && _jsx(AuthErrorBanner, { message: error }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "login-email", className: AUTH_FIELD_LABEL_CLASS, children: l.emailLabel }), _jsx("input", { id: "login-email", type: "email", placeholder: l.emailPlaceholder, value: email, onChange: (e) => setEmail(e.target.value), required: true, autoComplete: "email", disabled: isLoading, className: AUTH_INPUT_CLASS })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { htmlFor: "login-password", className: AUTH_FIELD_LABEL_CLASS, children: l.passwordLabel }), forgotPasswordUrl && (_jsx(LinkComp, { href: forgotPasswordUrl, className: "text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline", children: l.forgotPasswordText }))] }), _jsx("input", { id: "login-password", type: "password", placeholder: l.passwordPlaceholder, value: password, onChange: (e) => setPassword(e.target.value), required: true, autoComplete: "current-password", disabled: isLoading, className: AUTH_INPUT_CLASS })] }), _jsxs("button", { type: "submit", disabled: isLoading, className: AUTH_PRIMARY_BUTTON_CLASS, children: [isLoading && _jsx(AuthSpinner, {}), isLoading ? l.submittingButton : l.submitButton] })] })] }), registerUrl && (_jsxs("p", { className: "px-8 text-center text-sm text-muted-foreground", children: [l.noAccountText, ' ', _jsx(LinkComp, { href: registerUrl, className: AUTH_LINK_CLASS, children: l.signUpText })] }))] }));
 }

package/dist/RegisterForm.d.ts

@@ -23,6 +23,8 @@ export interface RegisterFormLabels {
     submittingButton?: string;
     hasAccountText?: string;
     signInText?: string;
+    /** Divider label between social sign-up and email/password (defaults to "or") */
+    orText?: string;
 }
 export interface RegisterFormProps {
     /** Callback on successful registration */
@@ -35,14 +37,19 @@ export interface RegisterFormProps {
     title?: string;
     /** Custom description */
     description?: string;
+    /** Custom icon shown above the title (defaults to a small user-plus disc) */
+    icon?: React.ReactNode;
     /** Custom link component for SPA navigation (e.g. React Router's Link) */
     linkComponent?: React.ComponentType<AuthLinkComponentProps>;
     /** Override default labels for i18n */
     labels?: RegisterFormLabels;
+    /** Hide the icon disc above the form title. Defaults to false. */
+    hideIcon?: boolean;
 }
 /**
  * Registration form component with name, email, and password fields.
- * Uses Tailwind CSS utility classes for styling.
+ * Uses Tailwind CSS utility classes for styling. Drop inside an `AuthShell`
+ * for a polished split-screen experience.
  *
  * @example
  * ```tsx
@@ -52,5 +59,5 @@ export interface RegisterFormProps {
  * />
  * ```
  */
-export declare function RegisterForm({ onSuccess, onError, loginUrl, title, description, linkComponent: LinkComp, labels, }: RegisterFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function RegisterForm({ onSuccess, onError, loginUrl, title, description, icon, hideIcon, linkComponent: LinkComp, labels, }: RegisterFormProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RegisterForm.d.ts.map

package/dist/RegisterForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RegisterForm.d.ts","sourceRoot":"","sources":["../src/RegisterForm.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,+CAA+C;AAC/C,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,qCAAqC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC5D,uCAAuC;IACvC,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,OAAO,EACP,QAAmB,EACnB,KAA2B,EAC3B,WAAqD,EACrD,aAAa,EAAE,QAAsB,EACrC,MAAW,GACZ,EAAE,iBAAiB,2CA0JnB"}
+{"version":3,"file":"RegisterForm.d.ts","sourceRoot":"","sources":["../src/RegisterForm.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAYtD,+CAA+C;AAC/C,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,qCAAqC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC5D,uCAAuC;IACvC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,OAAO,EACP,QAAmB,EACnB,KAA2B,EAC3B,WAAqD,EACrD,IAAI,EACJ,QAAgB,EAChB,aAAa,EAAE,QAAsB,EACrC,MAAW,GACZ,EAAE,iBAAiB,2CA6JnB"}

package/dist/RegisterForm.js

@@ -9,10 +9,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useAuth } from './useAuth';
 import { SocialSignInButtons } from './SocialSignInButtons';
+import { AUTH_FIELD_LABEL_CLASS, AUTH_INPUT_CLASS, AUTH_LINK_CLASS, AUTH_PRIMARY_BUTTON_CLASS, AuthDivider, AuthErrorBanner, AuthFormHeader, AuthSpinner, } from './authStyles';
 const DefaultLink = ({ href, className, children }) => (_jsx("a", { href: href, className: className, children: children }));
+const DefaultUserPlusIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", className: "h-6 w-6", "aria-hidden": "true", children: [_jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "9", cy: "7", r: "4" }), _jsx("line", { x1: "19", y1: "8", x2: "19", y2: "14" }), _jsx("line", { x1: "22", y1: "11", x2: "16", y2: "11" })] }));
 /**
  * Registration form component with name, email, and password fields.
- * Uses Tailwind CSS utility classes for styling.
+ * Uses Tailwind CSS utility classes for styling. Drop inside an `AuthShell`
+ * for a polished split-screen experience.
  *
  * @example
  * ```tsx
@@ -22,7 +25,7 @@ const DefaultLink = ({ href, className, children }) => (_jsx("a", { href: href,
  * />
  * ```
  */
-export function RegisterForm({ onSuccess, onError, loginUrl = '/login', title = 'Create an account', description = 'Enter your information to get started', linkComponent: LinkComp = DefaultLink, labels = {}, }) {
+export function RegisterForm({ onSuccess, onError, loginUrl = '/login', title = 'Create an account', description = 'Enter your information to get started', icon, hideIcon = false, linkComponent: LinkComp = DefaultLink, labels = {}, }) {
     const { signUp, isLoading } = useAuth();
     const [name, setName] = useState('');
     const [email, setEmail] = useState('');
@@ -44,6 +47,7 @@ export function RegisterForm({ onSuccess, onError, loginUrl = '/login', title =
         submittingButton: labels.submittingButton ?? 'Creating account...',
         hasAccountText: labels.hasAccountText ?? 'Already have an account?',
         signInText: labels.signInText ?? 'Sign in',
+        orText: labels.orText ?? 'or',
     };
     const handleSubmit = async (e) => {
         e.preventDefault();
@@ -66,5 +70,5 @@ export function RegisterForm({ onSuccess, onError, loginUrl = '/login', title =
             onError?.(authError);
         }
     };
-    return (_jsxs("div", { className: "mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[380px]", children: [_jsxs("div", { className: "flex flex-col space-y-2 text-center", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: description })] }), _jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsx(SocialSignInButtons, { mode: "sign-up" }), error && (_jsx("div", { className: "rounded-md bg-destructive/15 p-3 text-sm text-destructive", role: "alert", children: error })), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "register-name", className: "text-sm font-medium leading-none", children: l.nameLabel }), _jsx("input", { id: "register-name", type: "text", placeholder: l.namePlaceholder, value: name, onChange: (e) => setName(e.target.value), required: true, autoComplete: "name", disabled: isLoading, className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "register-email", className: "text-sm font-medium leading-none", children: l.emailLabel }), _jsx("input", { id: "register-email", type: "email", placeholder: l.emailPlaceholder, value: email, onChange: (e) => setEmail(e.target.value), required: true, autoComplete: "email", disabled: isLoading, className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "register-password", className: "text-sm font-medium leading-none", children: l.passwordLabel }), _jsx("input", { id: "register-password", type: "password", placeholder: l.passwordPlaceholder, value: password, onChange: (e) => setPassword(e.target.value), required: true, minLength: 8, autoComplete: "new-password", disabled: isLoading, className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "register-confirm-password", className: "text-sm font-medium leading-none", children: l.confirmPasswordLabel }), _jsx("input", { id: "register-confirm-password", type: "password", placeholder: l.confirmPasswordPlaceholder, value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), required: true, minLength: 8, autoComplete: "new-password", disabled: isLoading, className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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" })] }), _jsx("button", { type: "submit", disabled: isLoading, className: "inline-flex h-10 w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", children: isLoading ? l.submittingButton : l.submitButton })] }), loginUrl && (_jsxs("p", { className: "px-8 text-center text-sm text-muted-foreground", children: [l.hasAccountText, ' ', _jsx(LinkComp, { href: loginUrl, className: "text-primary underline-offset-4 hover:underline", children: l.signInText })] }))] }));
+    return (_jsxs("div", { className: "mx-auto flex w-full flex-col justify-center space-y-7 sm:w-[400px]", children: [_jsx(AuthFormHeader, { icon: hideIcon ? undefined : (icon ?? _jsx(DefaultUserPlusIcon, {})), title: title, description: description }), _jsxs("div", { className: "space-y-5", children: [_jsx(SocialSignInButtons, { mode: "sign-up" }), _jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsx(AuthDivider, { label: l.orText }), error && _jsx(AuthErrorBanner, { message: error }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "register-name", className: AUTH_FIELD_LABEL_CLASS, children: l.nameLabel }), _jsx("input", { id: "register-name", type: "text", placeholder: l.namePlaceholder, value: name, onChange: (e) => setName(e.target.value), required: true, autoComplete: "name", disabled: isLoading, className: AUTH_INPUT_CLASS })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "register-email", className: AUTH_FIELD_LABEL_CLASS, children: l.emailLabel }), _jsx("input", { id: "register-email", type: "email", placeholder: l.emailPlaceholder, value: email, onChange: (e) => setEmail(e.target.value), required: true, autoComplete: "email", disabled: isLoading, className: AUTH_INPUT_CLASS })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "register-password", className: AUTH_FIELD_LABEL_CLASS, children: l.passwordLabel }), _jsx("input", { id: "register-password", type: "password", placeholder: l.passwordPlaceholder, value: password, onChange: (e) => setPassword(e.target.value), required: true, minLength: 8, autoComplete: "new-password", disabled: isLoading, className: AUTH_INPUT_CLASS })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "register-confirm-password", className: AUTH_FIELD_LABEL_CLASS, children: l.confirmPasswordLabel }), _jsx("input", { id: "register-confirm-password", type: "password", placeholder: l.confirmPasswordPlaceholder, value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), required: true, minLength: 8, autoComplete: "new-password", disabled: isLoading, className: AUTH_INPUT_CLASS })] }), _jsxs("button", { type: "submit", disabled: isLoading, className: AUTH_PRIMARY_BUTTON_CLASS, children: [isLoading && _jsx(AuthSpinner, {}), isLoading ? l.submittingButton : l.submitButton] })] })] }), loginUrl && (_jsxs("p", { className: "px-8 text-center text-sm text-muted-foreground", children: [l.hasAccountText, ' ', _jsx(LinkComp, { href: loginUrl, className: AUTH_LINK_CLASS, children: l.signInText })] }))] }));
 }

package/dist/authStyles.d.ts

@@ -0,0 +1,52 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+/**
+ * Shared Tailwind utility classes for auth form primitives.
+ * These mirror the look used across LoginForm / RegisterForm /
+ * ForgotPasswordForm so the package presents a coherent feel.
+ *
+ * Consumers can override styling per-form by passing their own children
+ * inside an AuthShell, but the defaults aim to look premium out of the box.
+ */
+export declare const AUTH_INPUT_CLASS = "flex h-11 w-full rounded-lg border border-input bg-background px-3.5 py-2 text-sm shadow-sm ring-offset-background transition-colors placeholder:text-muted-foreground hover:border-primary/40 focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50";
+export declare const AUTH_PRIMARY_BUTTON_CLASS = "inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-primary to-primary/85 px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm ring-offset-background transition-all hover:shadow-md hover:from-primary hover:to-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 active:scale-[0.99] disabled:pointer-events-none disabled:opacity-60";
+export declare const AUTH_FIELD_LABEL_CLASS = "text-sm font-medium leading-none text-foreground";
+export declare const AUTH_LINK_CLASS = "font-medium text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:underline";
+/** Decorative spinner shown while a submit is pending. */
+export declare function AuthSpinner(): import("react/jsx-runtime").JSX.Element;
+/** Inline alert icon for the error banner. */
+export declare function AuthAlertIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** Inline success check icon for confirmation states. */
+export declare function AuthCheckIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** Inline mail icon for the forgot-password success state. */
+export declare function AuthMailIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Decorative wrapper that renders the form title block:
+ * optional icon disc + title + description, centered.
+ */
+export declare function AuthFormHeader({ icon, title, description, }: {
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** Inline error banner used by all auth forms. */
+export declare function AuthErrorBanner({ message }: {
+    message: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** "or" divider used when social sign-in buttons are present. */
+export declare function AuthDivider({ label }: {
+    label?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=authStyles.d.ts.map

package/dist/authStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"authStyles.d.ts","sourceRoot":"","sources":["../src/authStyles.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,0XAC4V,CAAC;AAE1X,eAAO,MAAM,yBAAyB,8bACuZ,CAAC;AAE9b,eAAO,MAAM,sBAAsB,qDAAqD,CAAC;AAEzF,eAAO,MAAM,eAAe,mHACsF,CAAC;AAEnH,0DAA0D;AAC1D,wBAAgB,WAAW,4CAyB1B;AAED,8CAA8C;AAC9C,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAiBlE;AAED,yDAAyD;AACzD,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAgBlE;AAED,8DAA8D;AAC9D,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAgBjE;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,WAAW,GACZ,EAAE;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,2CAgBA;AAED,kDAAkD;AAClD,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,2CAU/D;AAED,iEAAiE;AACjE,wBAAgB,WAAW,CAAC,EAAE,KAAY,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,2CAW/D"}

package/dist/authStyles.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Shared Tailwind utility classes for auth form primitives.
+ * These mirror the look used across LoginForm / RegisterForm /
+ * ForgotPasswordForm so the package presents a coherent feel.
+ *
+ * Consumers can override styling per-form by passing their own children
+ * inside an AuthShell, but the defaults aim to look premium out of the box.
+ */
+export const AUTH_INPUT_CLASS = 'flex h-11 w-full rounded-lg border border-input bg-background px-3.5 py-2 text-sm shadow-sm ring-offset-background transition-colors placeholder:text-muted-foreground hover:border-primary/40 focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50';
+export const AUTH_PRIMARY_BUTTON_CLASS = 'inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-primary to-primary/85 px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm ring-offset-background transition-all hover:shadow-md hover:from-primary hover:to-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 active:scale-[0.99] disabled:pointer-events-none disabled:opacity-60';
+export const AUTH_FIELD_LABEL_CLASS = 'text-sm font-medium leading-none text-foreground';
+export const AUTH_LINK_CLASS = 'font-medium text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:underline';
+/** Decorative spinner shown while a submit is pending. */
+export function AuthSpinner() {
+    return (_jsxs("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-90", d: "M4 12a8 8 0 018-8", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round" })] }));
+}
+/** Inline alert icon for the error banner. */
+export function AuthAlertIcon({ className }) {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className ?? 'h-4 w-4 shrink-0', "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })] }));
+}
+/** Inline success check icon for confirmation states. */
+export function AuthCheckIcon({ className }) {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className ?? 'h-6 w-6', "aria-hidden": "true", children: [_jsx("path", { d: "M22 11.08V12a10 10 0 11-5.93-9.14" }), _jsx("polyline", { points: "22 4 12 14.01 9 11.01" })] }));
+}
+/** Inline mail icon for the forgot-password success state. */
+export function AuthMailIcon({ className }) {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", className: className ?? 'h-7 w-7', "aria-hidden": "true", children: [_jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }), _jsx("path", { d: "m22 6-10 7L2 6" })] }));
+}
+/**
+ * Decorative wrapper that renders the form title block:
+ * optional icon disc + title + description, centered.
+ */
+export function AuthFormHeader({ icon, title, description, }) {
+    return (_jsxs("div", { className: "flex flex-col items-center space-y-3 text-center", children: [icon && (_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary ring-1 ring-primary/15", children: icon })), _jsx("h1", { className: "text-2xl font-semibold tracking-tight text-foreground sm:text-[1.6rem]", children: title }), description && (_jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: description }))] }));
+}
+/** Inline error banner used by all auth forms. */
+export function AuthErrorBanner({ message }) {
+    return (_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive", role: "alert", children: [_jsx(AuthAlertIcon, { className: "mt-0.5 h-4 w-4 shrink-0" }), _jsx("span", { className: "leading-snug", children: message })] }));
+}
+/** "or" divider used when social sign-in buttons are present. */
+export function AuthDivider({ label = 'or' }) {
+    return (_jsxs("div", { className: "relative my-1", children: [_jsx("div", { className: "absolute inset-0 flex items-center", "aria-hidden": "true", children: _jsx("span", { className: "w-full border-t border-border" }) }), _jsx("div", { className: "relative flex justify-center text-xs uppercase tracking-wider", children: _jsx("span", { className: "bg-background px-3 text-muted-foreground", children: label }) })] }));
+}

package/dist/index.d.ts

@@ -22,6 +22,7 @@
 export { AuthProvider, type AuthProviderProps } from './AuthProvider';
 export { useAuth } from './useAuth';
 export { AuthGuard, type AuthGuardProps } from './AuthGuard';
+export { AuthShell, type AuthShellProps, type AuthShellBrandPanel } from './AuthShell';
 export { LoginForm, type LoginFormProps, type LoginFormLabels } from './LoginForm';
 export { RegisterForm, type RegisterFormProps, type RegisterFormLabels } from './RegisterForm';
 export { ForgotPasswordForm, type ForgotPasswordFormProps, type ForgotPasswordFormLabels } from './ForgotPasswordForm';
@@ -31,6 +32,7 @@ export { PreviewBanner, type PreviewBannerProps } from './PreviewBanner';
 export { createAuthClient, TokenStorage } from './createAuthClient';
 export { createAuthenticatedFetch, ActiveOrganizationStorage, type AuthenticatedAdapterOptions } from './createAuthenticatedFetch';
 export { getUserInitials } from './types';
+export { AUTH_FIELD_LABEL_CLASS, AUTH_INPUT_CLASS, AUTH_LINK_CLASS, AUTH_PRIMARY_BUTTON_CLASS, AuthAlertIcon, AuthCheckIcon, AuthDivider, AuthErrorBanner, AuthFormHeader, AuthMailIcon, AuthSpinner, } from './authStyles';
 export type { AuthUser, AuthSession, AuthState, AuthClient, AuthClientConfig, AuthLinkComponentProps, AuthProviderConfig, PreviewModeOptions, SignInCredentials, SignUpData, AuthOrganization, AuthOrganizationMember, AuthInvitation, AuthSocialProvider, AuthPublicConfig, SignInWithProviderOptions, } from './types';
 export type { AuthContextValue } from './AuthContext';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AACnF,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAC/F,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,KAAK,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AACvH,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAC3F,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,KAAK,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AACnI,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG1C,YAAY,EACV,QAAQ,EACR,WAAW,EACX,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,UAAU,EACV,gBAAgB,EAChB,sBAAsB,EACtB,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,yBAAyB,GAC1B,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AACnF,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAC/F,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,KAAK,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AACvH,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAC3F,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,KAAK,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AACnI,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI1C,OAAO,EACL,sBAAsB,EACtB,gBAAgB,EAChB,eAAe,EACf,yBAAyB,EACzB,aAAa,EACb,aAAa,EACb,WAAW,EACX,eAAe,EACf,cAAc,EACd,YAAY,EACZ,WAAW,GACZ,MAAM,cAAc,CAAC;AAGtB,YAAY,EACV,QAAQ,EACR,WAAW,EACX,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,UAAU,EACV,gBAAgB,EAChB,sBAAsB,EACtB,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,yBAAyB,GAC1B,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -22,6 +22,7 @@
 export { AuthProvider } from './AuthProvider';
 export { useAuth } from './useAuth';
 export { AuthGuard } from './AuthGuard';
+export { AuthShell } from './AuthShell';
 export { LoginForm } from './LoginForm';
 export { RegisterForm } from './RegisterForm';
 export { ForgotPasswordForm } from './ForgotPasswordForm';
@@ -31,3 +32,6 @@ export { PreviewBanner } from './PreviewBanner';
 export { createAuthClient, TokenStorage } from './createAuthClient';
 export { createAuthenticatedFetch, ActiveOrganizationStorage } from './createAuthenticatedFetch';
 export { getUserInitials } from './types';
+// Shared auth form primitives — exposed so consumers can build custom forms
+// that match the look of LoginForm / RegisterForm / ForgotPasswordForm.
+export { AUTH_FIELD_LABEL_CLASS, AUTH_INPUT_CLASS, AUTH_LINK_CLASS, AUTH_PRIMARY_BUTTON_CLASS, AuthAlertIcon, AuthCheckIcon, AuthDivider, AuthErrorBanner, AuthFormHeader, AuthMailIcon, AuthSpinner, } from './authStyles';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/auth",
-  "version": "4.6.0",
+  "version": "4.8.0",
   "type": "module",
   "license": "MIT",
   "description": "Authentication system for Object UI with AuthProvider, useAuth hook, AuthGuard, and form components.",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "better-auth": "^1.6.11",
-    "@object-ui/types": "4.6.0"
+    "@object-ui/types": "4.8.0"
   },
   "devDependencies": {
     "@types/react": "19.2.14",