@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/features/auctions/repository/bid.repository.js

@@ -1,3 +1,4 @@
+import { normalizeError } from "../../../errors/normalize";
 /**
  * Bid Repository
  *
@@ -17,6 +18,7 @@ export class BidRepository extends BaseRepository {
         const raw = super.mapDoc(snap);
         return decryptPiiFields(raw, [
             ...BID_PII_FIELDS,
+            // audit-unknown-ok: TS structural escape — generic param
         ]);
     }
     /**
@@ -159,6 +161,7 @@ export class BidRepository extends BaseRepository {
             return this.mapDoc(doc);
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to find winning bid for product: ${productId}`, error);
         }
     }
@@ -182,6 +185,7 @@ export class BidRepository extends BaseRepository {
             return bid.bidAmount;
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to find highest bid for product: ${productId}`, error);
         }
     }
@@ -198,6 +202,7 @@ export class BidRepository extends BaseRepository {
             return snapshot.docs.map((doc) => this.mapDoc(doc));
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to find bids for product: ${productId}`, error);
         }
     }
@@ -249,6 +254,7 @@ export class BidRepository extends BaseRepository {
             await batch.commit();
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to set winning bid: ${bidId}`, error);
         }
     }
@@ -272,6 +278,7 @@ export class BidRepository extends BaseRepository {
             await batch.commit();
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to end auction for product: ${productId}`, error);
         }
     }
@@ -295,6 +302,7 @@ export class BidRepository extends BaseRepository {
             await batch.commit();
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to cancel bids for product: ${productId}`, error);
         }
     }
@@ -306,6 +314,7 @@ export class BidRepository extends BaseRepository {
             return await getFirestoreCount(this.db.collection(this.collection).where(BID_FIELDS.PRODUCT_ID, "==", productId));
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to count bids for product: ${productId}`, error);
         }
     }
@@ -317,6 +326,7 @@ export class BidRepository extends BaseRepository {
             return await getFirestoreCount(this.db.collection(this.collection).where(BID_FIELDS.USER_ID, "==", userId));
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to count bids for user: ${userId}`, error);
         }
     }
@@ -339,6 +349,7 @@ export class BidRepository extends BaseRepository {
             return this.mapDoc(snapshot.docs[0]);
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to find bid for productId=${productId}, userId=${userId}`, error);
         }
     }

package/dist/features/auctions/schemas/bid-input.d.ts

@@ -0,0 +1,17 @@
+import { z } from "zod";
+/**
+ * Client-side schema for the place-bid form. Used by PlaceBidFormClient via
+ * <Form> + FieldInput. Schema-driven so all messages are localised by a single
+ * Zod custom-message map.
+ *
+ * `minBid` and `minBidIncrement` are derived from the auction state and passed
+ * to `placeBidSchema(minBid, minBidIncrement)` at render time.
+ */
+export declare const placeBidSchema: (minBid: number, minBidIncrement: number) => z.ZodObject<{
+    bidAmount: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodNumber, number, number>, number, number>, number, number>;
+}, "strip", z.ZodTypeAny, {
+    bidAmount: number;
+}, {
+    bidAmount: number;
+}>;
+export type PlaceBidValues = z.infer<ReturnType<typeof placeBidSchema>>;

package/dist/features/auctions/schemas/bid-input.js

@@ -0,0 +1,16 @@
+import { z } from "zod";
+/**
+ * Client-side schema for the place-bid form. Used by PlaceBidFormClient via
+ * <Form> + FieldInput. Schema-driven so all messages are localised by a single
+ * Zod custom-message map.
+ *
+ * `minBid` and `minBidIncrement` are derived from the auction state and passed
+ * to `placeBidSchema(minBid, minBidIncrement)` at render time.
+ */
+export const placeBidSchema = (minBid, minBidIncrement) => z.object({
+    bidAmount: z.coerce
+        .number({ required_error: "Enter a bid amount" })
+        .refine((v) => Number.isFinite(v) && v > 0, "Enter a valid bid amount")
+        .refine((v) => v >= minBid, `Bid must be at least ${minBid}`)
+        .refine((v) => (v - minBid) % minBidIncrement === 0 || (v - minBid) >= 0, `Bid must respect the minimum increment of ${minBidIncrement}`),
+});

package/dist/features/auctions/schemas/index.d.ts

@@ -58,8 +58,8 @@ export declare const auctionItemSchema: z.ZodObject<{
     createdAt: z.ZodString;
     updatedAt: z.ZodString;
 }, "strip", z.ZodTypeAny, {
-    currency: string;
     status: "draft" | "published" | "archived" | "sold";
+    currency: string;
     featured: boolean;
     listingType: "auction";
     createdAt: string;
@@ -87,8 +87,8 @@ export declare const auctionItemSchema: z.ZodObject<{
     }[] | undefined;
     storeSlug?: string | undefined;
 }, {
-    currency: string;
     status: "draft" | "published" | "archived" | "sold";
+    currency: string;
     featured: boolean;
     listingType: "auction";
     createdAt: string;

package/dist/features/auth/actions/profile-actions.d.ts

@@ -27,3 +27,5 @@ export declare function getPublicUserProfile(userId: string): Promise<Pick<UserD
 /** Fetch approved reviews for a store. storeId === storeSlug in this project. */
 export declare function getSellerReviews(storeId: string): Promise<Review[]>;
 export declare function getProfileStoreProducts(storeId: string): Promise<import("../../products").ProductDocument[]>;
+/** Approved reviews AUTHORED by this user (not reviews of their store). */
+export declare function getReviewsAuthoredBy(userId: string): Promise<Review[]>;

package/dist/features/auth/actions/profile-actions.js

@@ -70,3 +70,28 @@ export async function getProfileStoreProducts(storeId) {
     const products = await productRepository.findByStore(storeId);
     return products.filter((p) => p.status === ProductStatusValues.PUBLISHED);
 }
+/** Approved reviews AUTHORED by this user (not reviews of their store). */
+export async function getReviewsAuthoredBy(userId) {
+    const snapshot = await reviewRepository.findApprovedByUser(userId).catch(() => []);
+    return snapshot.map((r) => ({
+        id: r.id,
+        productId: r.productId,
+        productTitle: r.productTitle,
+        userId: r.userId,
+        userName: maskPublicReview(r).userName,
+        userAvatar: r.userAvatar,
+        rating: r.rating,
+        title: r.title,
+        comment: r.comment,
+        images: r.images?.map((url) => ({ url })),
+        status: r.status,
+        helpfulCount: r.helpfulCount,
+        reportCount: r.reportCount,
+        verified: r.verified,
+        featured: r.featured,
+        createdAt: r.createdAt instanceof Date ? r.createdAt.toISOString() : undefined,
+        updatedAt: r.updatedAt instanceof Date ? r.updatedAt.toISOString() : undefined,
+        storeSlug: r.storeId,
+        storeName: r.storeName,
+    }));
+}

package/dist/features/auth/actions/realtime-token-actions.js

@@ -9,6 +9,7 @@ import { chatRepository } from "../../admin/repository/chat.repository";
 import { conversationsRepository } from "../../messages/repository/conversations.repository";
 import { storeRepository } from "../../stores/repository/store.repository";
 import { serverLogger } from "../../../monitoring/index";
+import { normalizeError } from "../../../errors/normalize";
 export async function issueRealtimeToken(userId, userRole) {
     let chatIds = {};
     try {
@@ -16,6 +17,7 @@ export async function issueRealtimeToken(userId, userRole) {
         chatIds = Object.fromEntries(userChatIds.map((id) => [id, true]));
     }
     catch (err) {
+        void normalizeError(err);
         serverLogger.warn("Could not resolve chatIds for realtime token", { userId, err });
     }
     const conversationIds = {};
@@ -31,6 +33,7 @@ export async function issueRealtimeToken(userId, userRole) {
         }
     }
     catch (err) {
+        void normalizeError(err);
         serverLogger.warn("Could not resolve conversationIds for realtime token", { userId, err });
     }
     const customToken = await getAdminAuth().createCustomToken(userId, {

package/dist/features/auth/components/AuthStatusPanel.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div, Heading, Text } from "../../../ui";
-import { THEME_CONSTANTS } from "../../../tokens";
+import { THEMED_TEXT_ERROR, THEMED_TEXT_SUCCESS } from "../../../_internal/shared/styles/themed";
 function toneClass(tone) {
     if (tone === "success")
-        return THEME_CONSTANTS.themed.textSuccess;
+        return THEMED_TEXT_SUCCESS;
     if (tone === "error")
-        return THEME_CONSTANTS.themed.textError;
+        return THEMED_TEXT_ERROR;
     return "text-primary";
 }
 function iconPath(tone) {
@@ -18,5 +18,5 @@ function iconPath(tone) {
     return "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z";
 }
 export function AuthStatusPanel({ tone, title, message, actions, }) {
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { className: `mb-4 ${toneClass(tone)}`, children: _jsx("svg", { className: "w-16 h-16 mx-auto", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: iconPath(tone) }) }) }), _jsx(Heading, { level: 2, className: "mb-2 text-xl font-semibold", children: title }), message ? (_jsx(Text, { className: "mb-6 text-sm text-zinc-600 dark:text-zinc-400", children: message })) : null, actions] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { className: `mb-4 ${toneClass(tone)}`, children: _jsx("svg", { className: "w-16 h-16 mx-auto", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: iconPath(tone) }) }) }), _jsx(Heading, { level: 2, className: "mb-2", size: "xl", weight: "semibold", children: title }), message ? (_jsx(Text, { className: "mb-6", color: "muted", size: "sm", children: message })) : null, actions] }));
 }

package/dist/features/auth/components/ForgotPasswordView.js

@@ -1,15 +1,22 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
-import { Alert, Div, Heading, Label, Text } from "../../../ui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Alert, Button, Div, Heading, Row, Stack, Text } from "../../../ui";
+import { Form } from "../../../ui/components/Form";
+import { FieldInput } from "../../../ui/forms/FieldInput";
+import { applyZodIssues } from "../../../ui/forms/FormShell";
+import { forgotPasswordSchema } from "../schemas";
 export function ForgotPasswordView({ onSubmit, isLoading = false, error, success, labels = {}, renderBackLink, className = "", }) {
     const [email, setEmail] = useState("");
-    const handleSubmit = useCallback(async (e) => {
-        e.preventDefault();
-        await onSubmit(email);
-    }, [onSubmit, email]);
-    return (_jsx(Div, { className: `flex items-center justify-center min-h-[60vh] px-4 ${className}`, children: _jsxs(Div, { className: "max-w-md w-full space-y-6", children: [_jsxs(Div, { className: "text-center", children: [_jsx(Heading, { level: 1, className: "text-3xl font-extrabold", children: labels.title ?? "Forgot Password" }), _jsx(Text, { className: "mt-2 text-sm text-neutral-600 dark:text-zinc-400", children: labels.description ??
-                                "Enter your email and we'll send you a reset link." })] }), error && (_jsx(Alert, { variant: "error", compact: true, children: error })), success && (_jsx(Alert, { variant: "success", compact: true, children: success })), !success && (_jsxs("form", { className: "space-y-4", onSubmit: handleSubmit, noValidate: true, children: [_jsxs(Div, { children: [_jsx(Label, { htmlFor: "fp-email", className: "block text-sm font-medium mb-1", children: labels.emailLabel ?? "Email address" }), _jsx("input", { id: "fp-email", name: "email", type: "email", autoComplete: "username", required: true, placeholder: labels.emailPlaceholder ?? "you@example.com", value: email, onChange: (e) => setEmail(e.target.value), className: "w-full rounded-lg border border-neutral-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-zinc-900 dark:text-zinc-100 placeholder:text-neutral-400 dark:placeholder:text-slate-500 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" })] }), _jsx("button", { type: "submit", disabled: isLoading, className: "w-full rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-white disabled:opacity-60 hover:bg-primary/90 transition-colors", children: isLoading
-                                ? (labels.submittingLabel ?? "Sending…")
-                                : (labels.submitLabel ?? "Send reset link") })] })), renderBackLink && (_jsx(Div, { className: "text-center text-sm", children: renderBackLink() }))] }) }));
+    return (_jsx(Row, { className: `min-h-[60vh] ${className}`, align: "center", justify: "center", padding: "x-md", children: _jsxs(Stack, { className: "max-w-md w-full", gap: "lg", children: [_jsxs(Div, { className: "text-center", children: [_jsx(Heading, { level: 1, className: "font-extrabold", size: "3xl", children: labels.title ?? "Forgot Password" }), _jsx(Text, { className: "mt-2 text-neutral-600 dark:text-neutral-400", size: "sm", children: labels.description ??
+                                "Enter your email and we'll send you a reset link." })] }), error && (_jsx(Alert, { variant: "error", compact: true, children: error })), success && (_jsx(Alert, { variant: "success", compact: true, children: success })), !success && (_jsx(Form, { noValidate: true, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(FieldInput, { name: "email", label: labels.emailLabel ?? "Email address", type: "email", autoComplete: "username", required: true, placeholder: labels.emailPlaceholder ?? "you@example.com", value: email, onChange: setEmail }), _jsx(Button, { type: "submit", isLoading: isLoading, disabled: isLoading, className: "w-full", onClick: async () => {
+                                    // toast-handled-by-hook: onSubmit prop's mutation hook owns toast UX
+                                    clearErrors();
+                                    const parsed = forgotPasswordSchema.safeParse({ email });
+                                    if (!parsed.success)
+                                        return applyZodIssues(parsed.error.issues, setFieldError);
+                                    await onSubmit(parsed.data.email);
+                                }, children: isLoading
+                                    ? (labels.submittingLabel ?? "Sending…")
+                                    : (labels.submitLabel ?? "Send reset link") })] })) })), renderBackLink && (_jsx(Div, { textSize: "sm", className: "text-center", children: renderBackLink() }))] }) }));
 }

package/dist/features/auth/components/Guards.d.ts

@@ -25,11 +25,11 @@ export interface AuthRouteConfig {
  * @example
  * ```tsx
  * <RoleGate
- *   user={currentUser}
- *   allowedRoles="admin"
- *   fallback={<div data-section="guards-div-259">Not authorized</div>}
+ * user={currentUser}
+ * allowedRoles="admin"
+ * fallback={<div data-section="guards-div-259">Not authorized</div>}
  * >
- *   <AdminPanel />
+ * <AdminPanel />
  * </RoleGate>
  * ```
  */
@@ -53,14 +53,14 @@ export declare function RoleGate({ children, user, allowedRoles, fallback, }: Ro
  * @example
  * ```tsx
  * <ProtectedRoute
- *   user={user}
- *   loading={isLoading}
- *   requireAuth
- *   requireRole="admin"
- *   onNavigate={(path) => router.push(path)}
- *   routes={{ loginPath: "/auth/login", unauthorizedPath: "/errors/403" }}
+ * user={user}
+ * loading={isLoading}
+ * requireAuth
+ * requireRole="admin"
+ * onNavigate={(path) => router.push(path)}
+ * routes={{ loginPath: "/auth/login", unauthorizedPath: "/errors/403" }}
  * >
- *   <AdminDashboard />
+ * <AdminDashboard />
  * </ProtectedRoute>
  * ```
  */

package/dist/features/auth/components/Guards.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo } from "react";
-import { Div, Heading, Text, Button } from "../../../ui";
+import { Button, Div, Heading, Row, Text } from "../../../ui";
 export function RoleGate({ children, user, allowedRoles, fallback = null, }) {
     if (!user?.role) {
         return _jsx(_Fragment, { children: fallback });
@@ -74,7 +74,7 @@ export function ProtectedRoute({ children, user, loading = false, requireAuth =
         if (loadingComponent) {
             return _jsx(_Fragment, { children: loadingComponent });
         }
-        return (_jsx(Div, { className: "flex min-h-[40vh] items-center justify-center", children: _jsx(Div, { className: "h-8 w-8 animate-spin rounded-full border-2 border-neutral-300 border-t-neutral-800" }) }));
+        return (_jsx(Row, { className: "min-h-[40vh]", align: "center", justify: "center", children: _jsx(Div, { className: "h-8 w-8 animate-spin border-2 border-neutral-300 border-t-neutral-800", rounded: "full" }) }));
     }
     // Unauthorized — show message or return null if redirecting
     if (isAuthorized === false) {
@@ -82,7 +82,7 @@ export function ProtectedRoute({ children, user, loading = false, requireAuth =
             if (unauthorizedComponent) {
                 return _jsx(_Fragment, { children: unauthorizedComponent });
             }
-            return (_jsx(Div, { className: "flex min-h-[50vh] items-center justify-center bg-neutral-50 dark:bg-neutral-900", children: _jsxs(Div, { className: "text-center", children: [_jsx(Heading, { level: 1, className: "mb-2 text-2xl font-bold", children: uiLabels.accessDenied }), _jsx(Text, { className: "mb-6 text-neutral-600 dark:text-neutral-400", children: uiLabels.unauthorizedDescription }), _jsx(Button, { onClick: () => onNavigate?.(defaultRedirectPath), variant: "primary", children: uiLabels.goHome })] }) }));
+            return (_jsx(Row, { className: "min-h-[50vh] bg-neutral-50 dark:bg-neutral-900", align: "center", justify: "center", children: _jsxs(Div, { className: "text-center", children: [_jsx(Heading, { level: 1, className: "mb-2", size: "2xl", weight: "bold", children: uiLabels.accessDenied }), _jsx(Text, { className: "mb-6", color: "muted", children: uiLabels.unauthorizedDescription }), _jsx(Button, { onClick: () => onNavigate?.(defaultRedirectPath), variant: "primary", children: uiLabels.goHome })] }) }));
         }
         return null;
     }

package/dist/features/auth/components/LoginForm.d.ts

@@ -23,14 +23,9 @@ export interface LoginFormProps {
         submittingLabel?: string;
         orSeparator?: string;
     };
-    /** Render social login buttons (e.g. Google) */
     renderSocialButtons?: () => React.ReactNode;
-    /** Render a "create account" link */
     renderCreateAccountLink?: () => React.ReactNode;
-    /** Render forgot password link */
     renderForgotPasswordLink?: () => React.ReactNode;
-    /** Render submit button */
-    renderSubmitButton?: (loading: boolean, labels: LoginFormProps["labels"]) => React.ReactNode;
     className?: string;
 }
-export declare function LoginForm({ onSubmit, onGoogleLogin, isLoading, error, labels, renderSocialButtons, renderCreateAccountLink, renderForgotPasswordLink, renderSubmitButton, className, }: LoginFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function LoginForm({ onSubmit, onGoogleLogin, isLoading, error, labels, renderSocialButtons, renderCreateAccountLink, renderForgotPasswordLink, className, }: LoginFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/auth/components/LoginForm.js

@@ -1,19 +1,27 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
-import { Alert, Div, Heading, Row, Text, Label } from "../../../ui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Alert, Button, Div, Heading, Row, Stack, Text } from "../../../ui";
+import { Form } from "../../../ui/components/Form";
+import { FieldInput } from "../../../ui/forms/FieldInput";
+import { FieldCheckbox } from "../../../ui/forms/FieldCheckbox";
+import { applyZodIssues } from "../../../ui/forms/FormShell";
+import { loginSchema } from "../schemas";
 import { SocialAuthButtons } from "./SocialAuthButtons";
-export function LoginForm({ onSubmit, onGoogleLogin, isLoading = false, error, labels = {}, renderSocialButtons, renderCreateAccountLink, renderForgotPasswordLink, renderSubmitButton, className = "", }) {
+export function LoginForm({ onSubmit, onGoogleLogin, isLoading = false, error, labels = {}, renderSocialButtons, renderCreateAccountLink, renderForgotPasswordLink, className = "", }) {
     const [values, setValues] = useState({
         email: "",
         password: "",
         rememberMe: false,
     });
-    const handleSubmit = useCallback(async (e) => {
-        e.preventDefault();
-        await onSubmit(values);
-    }, [onSubmit, values]);
-    return (_jsx(Div, { className: `flex items-center justify-center min-h-[60vh] px-4 ${className}`, children: _jsxs(Div, { className: "max-w-md w-full space-y-6", children: [_jsxs(Div, { className: "text-center", children: [_jsx(Heading, { level: 1, className: "text-3xl font-extrabold", children: labels.title ?? "Sign In" }), (labels.subtitle || renderCreateAccountLink) && (_jsxs(Text, { className: "mt-2 text-sm text-zinc-600 dark:text-zinc-400", children: [labels.subtitle ?? "Or", " ", renderCreateAccountLink?.()] }))] }), error && (_jsx(Alert, { variant: "error", compact: true, children: error })), _jsxs("form", { className: "space-y-4", onSubmit: handleSubmit, noValidate: true, children: [_jsxs(Div, { children: [_jsx(Label, { htmlFor: "login-email", className: "block text-sm font-medium mb-1", children: labels.emailLabel ?? "Email address" }), _jsx("input", { id: "login-email", name: "email", type: "email", autoComplete: "username", required: true, placeholder: labels.emailPlaceholder ?? "you@example.com", value: values.email, onChange: (e) => setValues({ ...values, email: e.target.value }), className: "w-full rounded-lg border border-neutral-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-zinc-900 dark:text-zinc-50 placeholder:text-neutral-400 dark:placeholder:text-slate-500 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" })] }), _jsxs(Div, { children: [_jsx(Label, { htmlFor: "login-password", className: "block text-sm font-medium mb-1", children: labels.passwordLabel ?? "Password" }), _jsx("input", { id: "login-password", name: "password", type: "password", autoComplete: "current-password", required: true, placeholder: labels.passwordPlaceholder ?? "••••••••", value: values.password, onChange: (e) => setValues({ ...values, password: e.target.value }), className: "w-full rounded-lg border border-neutral-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-zinc-900 dark:text-zinc-50 placeholder:text-neutral-400 dark:placeholder:text-slate-500 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" })] }), _jsxs(Row, { justify: "between", children: [_jsxs(Row, { className: "gap-2", children: [_jsx("input", { id: "login-remember", type: "checkbox", checked: values.rememberMe ?? false, onChange: (e) => setValues({ ...values, rememberMe: e.target.checked }), className: "h-4 w-4 rounded border-neutral-300 dark:border-slate-600 accent-primary" }), _jsx(Label, { htmlFor: "login-remember", className: "text-sm", children: labels.rememberMe ?? "Remember me" })] }), renderForgotPasswordLink?.()] }), renderSubmitButton ? (renderSubmitButton(isLoading, labels)) : (_jsx("button", { type: "submit", disabled: isLoading, className: "w-full rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-white disabled:opacity-60 hover:bg-primary/90 transition-colors", children: isLoading
-                                ? (labels.submittingLabel ?? "Signing in…")
-                                : (labels.submitLabel ?? "Sign in") }))] }), onGoogleLogin && !renderSocialButtons ? (_jsx(SocialAuthButtons, { onGoogle: onGoogleLogin, disabled: isLoading, dividerLabel: labels.orSeparator ?? "Or continue with", googleLabel: "Sign in with Google" })) : (renderSocialButtons?.())] }) }));
+    return (_jsx(Row, { className: `min-h-[60vh] ${className}`, align: "center", justify: "center", padding: "x-md", children: _jsxs(Stack, { className: "max-w-md w-full", gap: "lg", children: [_jsxs(Div, { className: "text-center", children: [_jsx(Heading, { level: 1, className: "font-extrabold", size: "3xl", children: labels.title ?? "Sign In" }), (labels.subtitle || renderCreateAccountLink) && (_jsxs(Text, { className: "mt-2", color: "muted", size: "sm", children: [labels.subtitle ?? "Or", " ", renderCreateAccountLink?.()] }))] }), error && (_jsx(Alert, { variant: "error", compact: true, children: error })), _jsx(Form, { noValidate: true, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(FieldInput, { name: "email", label: labels.emailLabel ?? "Email address", type: "email", autoComplete: "username", required: true, placeholder: labels.emailPlaceholder ?? "you@example.com", value: values.email, onChange: (v) => setValues({ ...values, email: v }) }), _jsx(FieldInput, { name: "password", label: labels.passwordLabel ?? "Password", type: "password", autoComplete: "current-password", required: true, placeholder: labels.passwordPlaceholder ?? "••••••••", value: values.password, onChange: (v) => setValues({ ...values, password: v }) }), _jsxs(Row, { justify: "between", children: [_jsx(FieldCheckbox, { name: "rememberMe", label: labels.rememberMe ?? "Remember me", checked: values.rememberMe ?? false, onChange: (c) => setValues({ ...values, rememberMe: c }) }), renderForgotPasswordLink?.()] }), _jsx(Button, { type: "submit", isLoading: isLoading, disabled: isLoading, className: "w-full", onClick: async () => {
+                                    // toast-handled-by-hook: onSubmit prop's mutation hook owns toast UX
+                                    clearErrors();
+                                    const parsed = loginSchema.safeParse(values);
+                                    if (!parsed.success)
+                                        return applyZodIssues(parsed.error.issues, setFieldError);
+                                    await onSubmit(values);
+                                }, children: isLoading
+                                    ? (labels.submittingLabel ?? "Signing in…")
+                                    : (labels.submitLabel ?? "Sign in") })] })) }), onGoogleLogin && !renderSocialButtons ? (_jsx(SocialAuthButtons, { onGoogle: onGoogleLogin, disabled: isLoading, dividerLabel: labels.orSeparator ?? "Or continue with", googleLabel: "Sign in with Google" })) : (renderSocialButtons?.())] }) }));
 }

package/dist/features/auth/components/OAuthLoadingView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Heading, Text } from "../../../ui";
+import { Div, Heading, Row, Text } from "../../../ui";
 export function OAuthLoadingView() {
-    return (_jsx(Div, { className: "flex items-center justify-center min-h-[60vh] px-4", children: _jsxs(Div, { className: "max-w-sm w-full text-center", children: [_jsx(Div, { className: "w-12 h-12 rounded-full border-4 border-primary border-t-transparent animate-spin mx-auto mb-6" }), _jsx(Heading, { level: 2, className: "text-xl font-semibold mb-2", children: "Signing you in\u2026" }), _jsx(Text, { variant: "secondary", className: "text-sm", children: "Please wait while we complete your sign-in." })] }) }));
+    return (_jsx(Row, { className: "min-h-[60vh]", padding: "x-md", align: "center", justify: "center", children: _jsxs(Div, { className: "max-w-sm w-full text-center", children: [_jsx(Div, { className: "w-12 h-12 border-4 border-primary border-t-transparent animate-spin mx-auto mb-6", rounded: "full" }), _jsx(Heading, { level: 2, className: "mb-2", size: "xl", weight: "semibold", children: "Signing you in\u2026" }), _jsx(Text, { variant: "secondary", size: "sm", children: "Please wait while we complete your sign-in." })] }) }));
 }

package/dist/features/auth/components/RegisterForm.js

@@ -1,13 +1,23 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
-import { Alert, Button, Div, Heading, Label, Text } from "../../../ui";
-function renderRegisterFormFields(props) {
-    const { values, setValues, labels, renderTermsLink, renderPasswordStrength } = props;
-    const CLS_INPUT = "w-full rounded-lg border border-neutral-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-zinc-900 dark:text-zinc-100 placeholder:text-neutral-400 dark:placeholder:text-slate-500 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary";
-    const CLS_LABEL = "block text-sm font-medium mb-1";
-    return (_jsxs(_Fragment, { children: [_jsxs(Div, { children: [_jsx(Label, { htmlFor: "reg-name", className: CLS_LABEL, children: labels?.displayNameLabel ?? "Full name" }), _jsx("input", { id: "reg-name", name: "displayName", type: "text", autoComplete: "name", required: true, placeholder: labels?.displayNamePlaceholder ?? "Your name", value: values.displayName, onChange: (e) => setValues({ ...values, displayName: e.target.value }), className: "w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" })] }), _jsxs(Div, { children: [_jsx(Label, { htmlFor: "reg-email", className: CLS_LABEL, children: labels?.emailLabel ?? "Email address" }), _jsx("input", { id: "reg-email", name: "email", type: "email", autoComplete: "username", required: true, placeholder: labels?.emailPlaceholder ?? "you@example.com", value: values.email, onChange: (e) => setValues({ ...values, email: e.target.value }), className: CLS_INPUT })] }), _jsxs(Div, { children: [_jsx(Label, { htmlFor: "reg-password", className: CLS_LABEL, children: labels?.passwordLabel ?? "Password" }), _jsx("input", { id: "reg-password", name: "password", type: "password", autoComplete: "new-password", required: true, placeholder: labels?.passwordPlaceholder ?? "••••••••", value: values.password, onChange: (e) => setValues({ ...values, password: e.target.value }), className: CLS_INPUT }), renderPasswordStrength?.(values.password)] }), _jsxs(Div, { children: [_jsx(Label, { htmlFor: "reg-confirm", className: CLS_LABEL, children: labels?.confirmPasswordLabel ?? "Confirm password" }), _jsx("input", { id: "reg-confirm", name: "confirmPassword", type: "password", autoComplete: "new-password", required: true, placeholder: labels?.confirmPasswordPlaceholder ?? "••••••••", value: values.confirmPassword, onChange: (e) => setValues({ ...values, confirmPassword: e.target.value }), className: CLS_INPUT })] }), _jsxs(Div, { className: "flex items-start gap-2", children: [_jsx("input", { id: "reg-terms", type: "checkbox", required: true, checked: values.acceptTerms, onChange: (e) => setValues({ ...values, acceptTerms: e.target.checked }), className: "mt-0.5 h-4 w-4 rounded border-neutral-300 dark:border-slate-600 accent-primary" }), _jsxs(Label, { htmlFor: "reg-terms", className: "text-sm leading-snug", children: [labels?.acceptTermsLabel ?? "I accept the", " ", renderTermsLink?.()] })] })] }));
-}
+import { useState } from "react";
+import { z } from "zod";
+import { Alert, Button, Div, Heading, Row, Stack, Text } from "../../../ui";
+import { Form } from "../../../ui/components/Form";
+import { FieldInput } from "../../../ui/forms/FieldInput";
+import { FieldCheckbox } from "../../../ui/forms/FieldCheckbox";
+import { applyZodIssues } from "../../../ui/forms/FormShell";
+import { registerSchema } from "../schemas";
+const registerClientSchema = registerSchema.extend({
+    displayName: z.string().min(1, "Enter your name"),
+    confirmPassword: z.string().min(6),
+    acceptTerms: z.literal(true, {
+        errorMap: () => ({ message: "You must accept the terms to continue" }),
+    }),
+}).refine((v) => v.password === v.confirmPassword, {
+    message: "Passwords do not match",
+    path: ["confirmPassword"],
+});
 export function RegisterForm({ onSubmit, isLoading = false, error, success, labels = {}, renderSocialButtons, renderLoginLink, renderTermsLink, renderPasswordStrength, className = "", }) {
     const [values, setValues] = useState({
         email: "",
@@ -16,16 +26,14 @@ export function RegisterForm({ onSubmit, isLoading = false, error, success, labe
         displayName: "",
         acceptTerms: false,
     });
-    const [validationError, setValidationError] = useState(null);
-    const handleSubmit = useCallback(async (e) => {
-        e.preventDefault();
-        setValidationError(null);
-        if (values.password !== values.confirmPassword) {
-            setValidationError(labels.passwordMismatch ?? "Passwords do not match");
-            return;
-        }
-        await onSubmit(values);
-    }, [onSubmit, values, labels.passwordMismatch]);
-    const displayError = error ?? validationError;
-    return (_jsx(Div, { className: `flex items-center justify-center min-h-[60vh] px-4 ${className}`, children: _jsxs(Div, { className: "max-w-md w-full space-y-6", children: [_jsxs(Div, { className: "text-center", children: [_jsx(Heading, { level: 1, className: "text-3xl font-extrabold", children: labels.title ?? "Create Account" }), (labels.subtitle || renderLoginLink) && (_jsxs(Text, { className: "mt-2 text-sm text-neutral-600 dark:text-zinc-400", children: [labels.subtitle ?? "Already have an account?", " ", renderLoginLink?.()] }))] }), success && (_jsx(Alert, { variant: "success", compact: true, children: success })), displayError && (_jsx(Alert, { variant: "error", compact: true, children: displayError })), _jsxs("form", { className: "space-y-4", onSubmit: handleSubmit, noValidate: true, children: [renderRegisterFormFields({ values, setValues, labels, renderTermsLink, renderPasswordStrength }), _jsx(Button, { type: "submit", isLoading: isLoading, disabled: isLoading, className: "w-full", children: isLoading ? (labels.submittingLabel ?? "Creating account…") : (labels.submitLabel ?? "Create account") })] }), renderSocialButtons?.()] }) }));
+    return (_jsx(Row, { className: `min-h-[60vh] ${className}`, align: "center", justify: "center", padding: "x-md", children: _jsxs(Stack, { className: "max-w-md w-full", gap: "lg", children: [_jsxs(Div, { className: "text-center", children: [_jsx(Heading, { level: 1, className: "font-extrabold", size: "3xl", children: labels.title ?? "Create Account" }), (labels.subtitle || renderLoginLink) && (_jsxs(Text, { className: "mt-2 text-neutral-600 dark:text-neutral-400", size: "sm", children: [labels.subtitle ?? "Already have an account?", " ", renderLoginLink?.()] }))] }), success && (_jsx(Alert, { variant: "success", compact: true, children: success })), error && (_jsx(Alert, { variant: "error", compact: true, children: error })), _jsx(Form, { noValidate: true, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(FieldInput, { name: "displayName", label: labels.displayNameLabel ?? "Full name", type: "text", autoComplete: "name", required: true, placeholder: labels.displayNamePlaceholder ?? "Your name", value: values.displayName, onChange: (v) => setValues({ ...values, displayName: v }) }), _jsx(FieldInput, { name: "email", label: labels.emailLabel ?? "Email address", type: "email", autoComplete: "username", required: true, placeholder: labels.emailPlaceholder ?? "you@example.com", value: values.email, onChange: (v) => setValues({ ...values, email: v }) }), _jsxs(Div, { children: [_jsx(FieldInput, { name: "password", label: labels.passwordLabel ?? "Password", type: "password", autoComplete: "new-password", required: true, placeholder: labels.passwordPlaceholder ?? "••••••••", value: values.password, onChange: (v) => setValues({ ...values, password: v }) }), renderPasswordStrength?.(values.password)] }), _jsx(FieldInput, { name: "confirmPassword", label: labels.confirmPasswordLabel ?? "Confirm password", type: "password", autoComplete: "new-password", required: true, placeholder: labels.confirmPasswordPlaceholder ?? "••••••••", value: values.confirmPassword, onChange: (v) => setValues({ ...values, confirmPassword: v }) }), _jsx(FieldCheckbox, { name: "acceptTerms", label: `${labels.acceptTermsLabel ?? "I accept the terms"}`, checked: values.acceptTerms, onChange: (c) => setValues({ ...values, acceptTerms: c }) }), renderTermsLink && (_jsx(Text, { size: "xs", variant: "secondary", children: renderTermsLink() })), _jsx(Button, { type: "submit", isLoading: isLoading, disabled: isLoading, className: "w-full", onClick: async () => {
+                                    // toast-handled-by-hook: onSubmit prop's mutation hook owns toast UX
+                                    clearErrors();
+                                    const parsed = registerClientSchema.safeParse(values);
+                                    if (!parsed.success)
+                                        return applyZodIssues(parsed.error.issues, setFieldError);
+                                    await onSubmit(values);
+                                }, children: isLoading
+                                    ? (labels.submittingLabel ?? "Creating account…")
+                                    : (labels.submitLabel ?? "Create account") })] })) }), renderSocialButtons?.()] }) }));
 }

package/dist/features/auth/components/ResetPasswordView.js

@@ -1,22 +1,29 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
-import { Alert, Div, Heading, Label, Text } from "../../../ui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { z } from "zod";
+import { Alert, Button, Div, Heading, Row, Stack, Text } from "../../../ui";
+import { Form } from "../../../ui/components/Form";
+import { FieldInput } from "../../../ui/forms/FieldInput";
+import { applyZodIssues } from "../../../ui/forms/FormShell";
+const resetClientSchema = z.object({
+    password: z.string().min(6, "Password must be at least 6 characters"),
+    confirmPassword: z.string().min(6),
+}).refine((v) => v.password === v.confirmPassword, {
+    message: "Passwords do not match",
+    path: ["confirmPassword"],
+});
 export function ResetPasswordView({ oobCode, onSubmit, isLoading = false, error, success, labels = {}, renderLoginLink, className = "", }) {
     const [password, setPassword] = useState("");
-    const [confirm, setConfirm] = useState("");
-    const [validationError, setValidationError] = useState(null);
-    const handleSubmit = useCallback(async (e) => {
-        e.preventDefault();
-        setValidationError(null);
-        if (password !== confirm) {
-            setValidationError(labels.passwordMismatch ?? "Passwords do not match");
-            return;
-        }
-        await onSubmit(oobCode, password);
-    }, [oobCode, onSubmit, password, confirm, labels.passwordMismatch]);
-    const displayError = error ?? validationError;
-    return (_jsx(Div, { className: `flex items-center justify-center min-h-[60vh] px-4 ${className}`, children: _jsxs(Div, { className: "max-w-md w-full space-y-6", children: [_jsxs(Div, { className: "text-center", children: [_jsx(Heading, { level: 1, className: "text-3xl font-extrabold", children: labels.title ?? "Reset Password" }), labels.description && (_jsx(Text, { className: "mt-2 text-sm text-neutral-600 dark:text-zinc-400", children: labels.description }))] }), displayError && (_jsx(Alert, { variant: "error", compact: true, children: displayError })), success ? (_jsxs(Alert, { variant: "success", compact: true, children: [success, renderLoginLink && _jsx(Div, { className: "mt-2", children: renderLoginLink() })] })) : (_jsxs("form", { className: "space-y-4", onSubmit: handleSubmit, noValidate: true, children: [_jsxs(Div, { children: [_jsx(Label, { htmlFor: "rp-password", className: "block text-sm font-medium mb-1", children: labels.passwordLabel ?? "New password" }), _jsx("input", { id: "rp-password", name: "password", type: "password", autoComplete: "new-password", required: true, placeholder: labels.passwordPlaceholder ?? "••••••••", value: password, onChange: (e) => setPassword(e.target.value), className: "w-full rounded-lg border border-neutral-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-zinc-900 dark:text-zinc-100 placeholder:text-neutral-400 dark:placeholder:text-slate-500 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" })] }), _jsxs(Div, { children: [_jsx(Label, { htmlFor: "rp-confirm", className: "block text-sm font-medium mb-1", children: labels.confirmPasswordLabel ?? "Confirm new password" }), _jsx("input", { id: "rp-confirm", name: "confirmPassword", type: "password", autoComplete: "new-password", required: true, placeholder: labels.confirmPasswordPlaceholder ?? "••••••••", value: confirm, onChange: (e) => setConfirm(e.target.value), className: "w-full rounded-lg border border-neutral-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-zinc-900 dark:text-zinc-100 placeholder:text-neutral-400 dark:placeholder:text-slate-500 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" })] }), _jsx("button", { type: "submit", disabled: isLoading, className: "w-full rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-semibold text-white disabled:opacity-60 hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200 transition-colors", children: isLoading
-                                ? (labels.submittingLabel ?? "Resetting…")
-                                : (labels.submitLabel ?? "Reset password") })] }))] }) }));
+    const [confirmPassword, setConfirmPassword] = useState("");
+    return (_jsx(Row, { className: `min-h-[60vh] ${className}`, align: "center", justify: "center", padding: "x-md", children: _jsxs(Stack, { className: "max-w-md w-full", gap: "lg", children: [_jsxs(Div, { className: "text-center", children: [_jsx(Heading, { level: 1, className: "font-extrabold", size: "3xl", children: labels.title ?? "Reset Password" }), labels.description && (_jsx(Text, { className: "mt-2 text-neutral-600 dark:text-neutral-400", size: "sm", children: labels.description }))] }), error && (_jsx(Alert, { variant: "error", compact: true, children: error })), success ? (_jsxs(Alert, { variant: "success", compact: true, children: [success, renderLoginLink && _jsx(Div, { className: "mt-2", children: renderLoginLink() })] })) : (_jsx(Form, { noValidate: true, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(FieldInput, { name: "password", label: labels.passwordLabel ?? "New password", type: "password", autoComplete: "new-password", required: true, placeholder: labels.passwordPlaceholder ?? "••••••••", value: password, onChange: setPassword }), _jsx(FieldInput, { name: "confirmPassword", label: labels.confirmPasswordLabel ?? "Confirm new password", type: "password", autoComplete: "new-password", required: true, placeholder: labels.confirmPasswordPlaceholder ?? "••••••••", value: confirmPassword, onChange: setConfirmPassword }), _jsx(Button, { type: "submit", variant: "primary", isLoading: isLoading, disabled: isLoading, className: "w-full", onClick: async () => {
+                                    // toast-handled-by-hook: onSubmit prop's mutation hook owns toast UX
+                                    clearErrors();
+                                    const parsed = resetClientSchema.safeParse({ password, confirmPassword });
+                                    if (!parsed.success)
+                                        return applyZodIssues(parsed.error.issues, setFieldError);
+                                    await onSubmit(oobCode, parsed.data.password);
+                                }, children: isLoading
+                                    ? (labels.submittingLabel ?? "Resetting…")
+                                    : (labels.submitLabel ?? "Reset password") })] })) }))] }) }));
 }

package/dist/features/auth/components/SocialAuthButtons.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Div, Span } from "../../../ui";
+import { Button, Div, Row, Span } from "../../../ui";
 export function SocialAuthButtons({ onGoogle, disabled, dividerLabel, googleLabel, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: "relative", children: [_jsx(Div, { className: "absolute inset-0 flex items-center", children: _jsx(Div, { className: "w-full border-t border-neutral-200 dark:border-slate-700" }) }), _jsx(Div, { className: "relative flex justify-center text-sm", children: _jsx(Span, { className: "px-2 bg-white dark:bg-slate-950 text-neutral-500 dark:text-slate-400", children: dividerLabel }) })] }), _jsx(Div, { className: "grid grid-cols-1 gap-3", children: _jsxs(Button, { type: "button", onClick: onGoogle, disabled: disabled, variant: "outline", className: "inline-flex items-center justify-center rounded-md border border-neutral-300 dark:border-slate-700 bg-white dark:bg-slate-900 px-4 py-2 text-sm font-medium text-neutral-900 dark:text-zinc-100 hover:bg-neutral-50 dark:hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-50", children: [_jsxs("svg", { className: "mr-2 h-5 w-5", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { fill: "currentColor", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "currentColor", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "currentColor", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "currentColor", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })] }), googleLabel] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: "relative", children: [_jsx(Row, { className: "absolute inset-0", align: "center", children: _jsx(Div, { className: "w-full border-t border-neutral-200" }) }), _jsx(Row, { textSize: "sm", className: "relative", justify: "center", children: _jsx(Span, { className: "text-neutral-500 dark:text-neutral-400", padding: "x-xs", surface: "default", children: dividerLabel }) })] }), _jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-1", children: _jsxs(Button, { rounded: "md", type: "button", onClick: onGoogle, disabled: disabled, variant: "outline", paddingX: "md", paddingY: "sm", textSize: "sm", weight: "medium", className: "inline- justify-center border border-neutral-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-neutral-900 dark:text-zinc-100 hover:bg-neutral-50 dark:hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-50", children: [_jsxs("svg", { className: "mr-2 h-5 w-5", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { fill: "currentColor", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "currentColor", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "currentColor", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "currentColor", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })] }), googleLabel] }) })] }));
 }

package/dist/features/auth/components/VerifyEmailView.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Heading, Text, Button } from "../../../ui";
-import { THEME_CONSTANTS } from "../../../tokens";
-const CLS_SUCCESS_CIRCLE = "w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-6";
-const CLS_ERROR_CIRCLE = "w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-6";
-const CLS_ERROR_ICON = "w-6 h-6 text-red-600";
+import { Button, Div, Heading, Row, Text } from "../../../ui";
+import { THEMED_TEXT_SUCCESS } from "../../../_internal/shared/styles/themed";
+const CLS_SUCCESS_CIRCLE = "w-12 h-12 rounded-full bg-success-surface flex items-center justify-center mx-auto mb-6";
+const CLS_ERROR_CIRCLE = "w-12 h-12 rounded-full bg-error-surface flex items-center justify-center mx-auto mb-6";
+const CLS_ERROR_ICON = "w-6 h-6 text-error";
 export function VerifyEmailView({ status, error, labels = {}, onRetry, renderContinueButton, className = "", }) {
-    return (_jsx(Div, { className: `flex items-center justify-center min-h-[60vh] px-4 ${className}`, children: _jsxs(Div, { surface: "elevated", padding: "xl", className: "max-w-md w-full text-center", children: [status === "loading" && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "w-12 h-12 rounded-full border-4 border-primary border-t-transparent animate-spin mx-auto mb-6" }), _jsx(Heading, { level: 2, className: "text-xl font-semibold mb-2", children: labels.loadingTitle ?? "Verifying your email…" }), _jsx(Text, { className: "text-zinc-500 dark:text-zinc-400", children: labels.loadingDescription ?? "Please wait a moment." })] })), status === "success" && (_jsxs(_Fragment, { children: [_jsx(Div, { className: CLS_SUCCESS_CIRCLE, children: _jsx("svg", { className: `w-6 h-6 ${THEME_CONSTANTS.themed.textSuccess}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }), _jsx(Heading, { level: 2, className: "text-xl font-semibold mb-2", children: labels.successTitle ?? "Email verified!" }), _jsx(Text, { className: "text-zinc-500 dark:text-zinc-400 mb-6", children: labels.successDescription ??
-                                "Your email has been verified successfully." }), renderContinueButton?.()] })), status === "error" && (_jsxs(_Fragment, { children: [_jsx(Div, { className: CLS_ERROR_CIRCLE, children: _jsx("svg", { className: CLS_ERROR_ICON, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx(Heading, { level: 2, className: "text-xl font-semibold mb-2", children: labels.errorTitle ?? "Verification failed" }), _jsx(Text, { className: "text-zinc-500 dark:text-zinc-400 mb-2", children: error ??
+    return (_jsx(Row, { className: `min-h-[60vh] ${className}`, align: "center", justify: "center", padding: "x-md", children: _jsxs(Div, { surface: "elevated", padding: "xl", className: "max-w-md w-full text-center", children: [status === "loading" && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "w-12 h-12 border-4 border-primary border-t-transparent animate-spin mx-auto mb-6", rounded: "full" }), _jsx(Heading, { level: 2, className: "mb-2", size: "xl", weight: "semibold", children: labels.loadingTitle ?? "Verifying your email…" }), _jsx(Text, { color: "muted", children: labels.loadingDescription ?? "Please wait a moment." })] })), status === "success" && (_jsxs(_Fragment, { children: [_jsx(Div, { className: CLS_SUCCESS_CIRCLE, children: _jsx("svg", { className: `w-6 h-6 ${THEMED_TEXT_SUCCESS}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }), _jsx(Heading, { level: 2, className: "mb-2", size: "xl", weight: "semibold", children: labels.successTitle ?? "Email verified!" }), _jsx(Text, { className: "mb-6", color: "muted", children: labels.successDescription ??
+                                "Your email has been verified successfully." }), renderContinueButton?.()] })), status === "error" && (_jsxs(_Fragment, { children: [_jsx(Div, { className: CLS_ERROR_CIRCLE, children: _jsx("svg", { className: CLS_ERROR_ICON, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx(Heading, { level: 2, className: "mb-2", size: "xl", weight: "semibold", children: labels.errorTitle ?? "Verification failed" }), _jsx(Text, { className: "mb-2", color: "muted", children: error ??
                                 labels.errorDescription ??
-                                "The verification link may have expired." }), onRetry && (_jsx(Button, { onClick: onRetry, className: "mt-4 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary/90 transition-colors", children: labels.retryLabel ?? "Try again" }))] }))] }) }));
+                                "The verification link may have expired." }), onRetry && (_jsx(Button, { rounded: "lg", onClick: onRetry, paddingX: "md", paddingY: "sm", textSize: "sm", weight: "semibold", className: "mt-4 bg-primary text-white hover:bg-primary/90 transition-colors", children: labels.retryLabel ?? "Try again" }))] }))] }) }));
 }