nucleus-core-ts 0.8.6 → 0.8.8

package/dist/fe/components/UsersPage/store/index.js

@@ -0,0 +1,151 @@
+"use client";
+import { batch, createStore } from "h-state";
+const initialState = {
+    users: [],
+    profiles: [],
+    addresses: [],
+    phones: [],
+    files: [],
+    roles: [],
+    userRoles: [],
+    selectedUser: null,
+    searchQuery: "",
+    statusFilter: "all",
+    roleFilter: "all",
+    isDetailPanelOpen: false,
+    assigningRoleId: null,
+    currentPage: 1,
+    pageSize: 25,
+    totalItems: 0,
+    totalPages: 0,
+    isLoading: false
+};
+export const { useStore: useUsersStore } = createStore(initialState, {
+    setUsers: (store)=>(users)=>{
+            store.users = users;
+        },
+    setProfiles: (store)=>(profiles)=>{
+            store.profiles = profiles;
+        },
+    setAddresses: (store)=>(addresses)=>{
+            store.addresses = addresses;
+        },
+    setPhones: (store)=>(phones)=>{
+            store.phones = phones;
+        },
+    setFiles: (store)=>(files)=>{
+            store.files = files;
+        },
+    setRoles: (store)=>(roles)=>{
+            store.roles = roles;
+        },
+    setUserRoles: (store)=>(userRoles)=>{
+            store.userRoles = userRoles;
+        },
+    setSelectedUser: (store)=>(user)=>{
+            store.selectedUser = user;
+            store.isDetailPanelOpen = user !== null;
+        },
+    setSearchQuery: (store)=>(query)=>{
+            store.searchQuery = query;
+        },
+    setStatusFilter: (store)=>(filter)=>{
+            store.statusFilter = filter;
+        },
+    setRoleFilter: (store)=>(roleId)=>{
+            store.roleFilter = roleId;
+        },
+    setDetailPanelOpen: (store)=>(open)=>{
+            store.isDetailPanelOpen = open;
+            if (!open) {
+                store.selectedUser = null;
+            }
+        },
+    setAssigningRoleId: (store)=>(roleId)=>{
+            store.assigningRoleId = roleId;
+        },
+    setCurrentPage: (store)=>(page)=>{
+            store.currentPage = page;
+        },
+    setPageSize: (store)=>(size)=>{
+            store.pageSize = size;
+            store.currentPage = 1;
+        },
+    setPagination: (store)=>(total, totalPages)=>{
+            store.totalItems = total;
+            store.totalPages = totalPages;
+        },
+    setIsLoading: (store)=>(loading)=>{
+            store.isLoading = loading;
+        },
+    updateUser: (store)=>(userId, updates)=>{
+            store.users = store.users.map((u)=>u.id === userId ? {
+                    ...u,
+                    ...updates
+                } : u);
+            if (store.selectedUser?.id === userId) {
+                store.selectedUser = {
+                    ...store.selectedUser,
+                    ...updates
+                };
+            }
+        },
+    addUser: (store)=>(user)=>{
+            store.users = [
+                user,
+                ...store.users
+            ];
+            store.totalItems = store.totalItems + 1;
+        },
+    addUserRole: (store)=>(userRole)=>{
+            store.userRoles = [
+                ...store.userRoles,
+                userRole
+            ];
+        },
+    removeUserRole: (store)=>(userRoleId)=>{
+            store.userRoles = store.userRoles.filter((ur)=>ur.id !== userRoleId);
+        },
+    getUserWithDetails: (store)=>(userId)=>{
+            const user = store.users.find((u)=>u.id === userId);
+            if (!user) return null;
+            const profile = store.profiles.find((p)=>p.userId === userId);
+            const userAddresses = store.addresses.filter((a)=>a.ownerType === "user" && a.ownerId === userId);
+            const userPhones = store.phones.filter((p)=>p.ownerType === "user" && p.ownerId === userId);
+            const userFiles = store.files.filter((f)=>f.uploadedBy === userId);
+            const userUserRoles = store.userRoles.filter((ur)=>ur.userId === userId).map((ur)=>({
+                    ...ur,
+                    role: store.roles.find((r)=>r.id === ur.roleId)
+                }));
+            return {
+                ...user,
+                profile: profile || null,
+                addresses: userAddresses,
+                phones: userPhones,
+                files: userFiles,
+                userRoles: userUserRoles
+            };
+        },
+    reset: (store)=>()=>{
+            batch(()=>{
+                store.users = [];
+                store.profiles = [];
+                store.addresses = [];
+                store.phones = [];
+                store.files = [];
+                store.roles = [];
+                store.userRoles = [];
+                store.selectedUser = null;
+                store.searchQuery = "";
+                store.statusFilter = "all";
+                store.roleFilter = "all";
+                store.isDetailPanelOpen = false;
+                store.assigningRoleId = null;
+                store.currentPage = 1;
+                store.pageSize = 25;
+                store.totalItems = 0;
+                store.totalPages = 0;
+                store.isLoading = false;
+            });
+        }
+});

package/dist/fe/components/UsersPage/theme/index.js

@@ -0,0 +1,231 @@
+export const usersPageTheme = {
+    container: {
+        base: "min-h-screen bg-zinc-50 dark:bg-zinc-950 transition-colors",
+        padding: {
+            sm: "p-3",
+            md: "p-4",
+            lg: "p-6",
+            xl: "p-8",
+            "2xl": "p-10"
+        }
+    },
+    header: {
+        wrapper: "flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between mb-4 sm:mb-6",
+        title: "text-xl sm:text-2xl lg:text-3xl font-bold text-zinc-900 dark:text-zinc-100",
+        subtitle: "text-xs sm:text-sm text-zinc-500 dark:text-zinc-400",
+        actions: "flex items-center gap-2 mt-2 sm:mt-0"
+    },
+    layout: {
+        wrapper: "flex flex-col lg:flex-row gap-4 lg:gap-6",
+        sidebar: {
+            base: "transition-all duration-300 ease-in-out",
+            collapsed: "w-full",
+            expanded: "w-full lg:w-3/5 xl:w-2/3"
+        },
+        main: "w-full lg:w-2/5 xl:w-1/3 lg:sticky lg:top-4 lg:self-start"
+    },
+    filters: {
+        wrapper: "flex flex-col gap-3 p-3 sm:p-4 bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 mb-4",
+        searchInput: "w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500",
+        select: "px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500",
+        button: {
+            base: "px-3 py-2 text-sm font-medium rounded-lg transition-colors",
+            active: "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300",
+            inactive: "bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700"
+        },
+        badge: "px-2 py-0.5 text-xs font-medium bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 rounded-full"
+    },
+    table: {
+        wrapper: "bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden",
+        header: {
+            row: "border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/50",
+            cell: "px-3 sm:px-4 py-3 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider"
+        },
+        body: {
+            row: {
+                base: "border-b border-zinc-100 dark:border-zinc-800/50 transition-colors cursor-pointer",
+                hover: "hover:bg-zinc-50 dark:hover:bg-zinc-800/30",
+                selected: "bg-emerald-50 dark:bg-emerald-900/20"
+            },
+            cell: "px-3 sm:px-4 py-3 text-sm"
+        }
+    },
+    userCard: {
+        wrapper: {
+            base: "p-3 sm:p-4 border-b border-zinc-100 dark:border-zinc-800/50 transition-colors cursor-pointer",
+            hover: "hover:bg-zinc-50 dark:hover:bg-zinc-800/30",
+            selected: "bg-emerald-50 dark:bg-emerald-900/20 border-l-2 border-l-emerald-500"
+        },
+        avatar: {
+            wrapper: "relative flex-shrink-0",
+            image: "w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover",
+            placeholder: "w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center text-white font-semibold text-sm sm:text-base",
+            statusDot: {
+                base: "absolute -bottom-0.5 -right-0.5 w-3 h-3 sm:w-3.5 sm:h-3.5 rounded-full border-2 border-white dark:border-zinc-900",
+                active: "bg-emerald-500",
+                locked: "bg-red-500",
+                unverified: "bg-amber-500"
+            }
+        },
+        content: {
+            wrapper: "flex-1 min-w-0 ml-3",
+            name: "font-medium text-sm sm:text-base text-zinc-900 dark:text-zinc-100 truncate",
+            email: "text-xs sm:text-sm text-zinc-500 dark:text-zinc-400 truncate",
+            meta: "text-xs text-zinc-400 dark:text-zinc-500 mt-0.5"
+        },
+        badges: {
+            wrapper: "flex flex-wrap gap-1 mt-1.5",
+            role: "px-1.5 py-0.5 text-xs bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 rounded",
+            status: {
+                active: "px-1.5 py-0.5 text-xs font-medium bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 rounded",
+                locked: "px-1.5 py-0.5 text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 rounded",
+                unverified: "px-1.5 py-0.5 text-xs font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 rounded",
+                god: "px-1.5 py-0.5 text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded"
+            }
+        }
+    },
+    detailPanel: {
+        overlay: "fixed inset-0 bg-black/50 z-40 lg:hidden",
+        wrapper: {
+            base: "bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 overflow-hidden z-50 transition-all duration-300",
+            mobile: "fixed inset-x-0 bottom-0 rounded-t-2xl max-h-[85vh]",
+            tablet: "fixed inset-y-0 right-0 w-96 rounded-l-2xl",
+            desktop: "rounded-xl sticky top-4"
+        },
+        header: {
+            wrapper: "flex items-center justify-between p-4 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/50",
+            title: "text-base sm:text-lg font-semibold text-zinc-900 dark:text-zinc-100",
+            closeButton: "p-1.5 rounded-lg text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
+        },
+        content: {
+            wrapper: "p-4 space-y-4 overflow-y-auto max-h-[calc(100vh-200px)]",
+            section: {
+                wrapper: "space-y-2",
+                title: "text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider",
+                content: "bg-zinc-50 dark:bg-zinc-800/50 rounded-lg p-3 space-y-2"
+            },
+            row: {
+                wrapper: "flex items-center justify-between gap-2",
+                label: "text-sm text-zinc-500 dark:text-zinc-400",
+                value: "text-sm font-medium text-zinc-900 dark:text-zinc-100 text-right truncate"
+            }
+        },
+        actions: {
+            wrapper: "p-4 border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/50",
+            button: {
+                base: "w-full px-3 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+                primary: "bg-emerald-600 hover:bg-emerald-700 text-white",
+                danger: "bg-red-100 hover:bg-red-200 dark:bg-red-900/30 dark:hover:bg-red-900/50 text-red-700 dark:text-red-300",
+                warning: "bg-amber-100 hover:bg-amber-200 dark:bg-amber-900/30 dark:hover:bg-amber-900/50 text-amber-700 dark:text-amber-300",
+                info: "bg-blue-100 hover:bg-blue-200 dark:bg-blue-900/30 dark:hover:bg-blue-900/50 text-blue-700 dark:text-blue-300"
+            }
+        }
+    },
+    pagination: {
+        wrapper: "flex flex-col sm:flex-row items-center justify-between gap-3 p-3 sm:p-4 bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 mt-4",
+        info: "text-sm text-zinc-500 dark:text-zinc-400",
+        controls: {
+            wrapper: "flex items-center gap-1 sm:gap-2",
+            button: {
+                base: "px-2 sm:px-3 py-1.5 text-sm rounded-lg transition-colors",
+                active: "bg-emerald-600 text-white",
+                disabled: "text-zinc-300 dark:text-zinc-600 cursor-not-allowed"
+            },
+            pageSize: "px-2 py-1.5 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100"
+        }
+    },
+    skeleton: {
+        base: "animate-pulse bg-zinc-200 dark:bg-zinc-800 rounded",
+        avatar: "w-10 h-10 sm:w-12 sm:h-12 rounded-full",
+        text: "h-4 rounded",
+        button: "h-9 rounded-lg"
+    },
+    emptyState: {
+        wrapper: "flex flex-col items-center justify-center py-12 px-4 text-center",
+        icon: "w-12 h-12 text-zinc-300 dark:text-zinc-600 mb-4",
+        title: "text-lg font-medium text-zinc-900 dark:text-zinc-100 mb-1",
+        description: "text-sm text-zinc-500 dark:text-zinc-400"
+    },
+    modal: {
+        overlay: "fixed inset-0 bg-black/60 backdrop-blur-sm z-40",
+        wrapper: "w-full max-w-md bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl border border-zinc-200 dark:border-zinc-800 overflow-hidden",
+        header: {
+            wrapper: "flex items-start justify-between gap-4 p-5 border-b border-zinc-200 dark:border-zinc-800",
+            icon: "flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-xl bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400",
+            title: "text-lg font-semibold text-zinc-900 dark:text-zinc-100",
+            subtitle: "text-sm text-zinc-500 dark:text-zinc-400 mt-0.5"
+        },
+        content: "p-5",
+        infoBox: "flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-100 dark:border-blue-800/30",
+        footer: "flex items-center justify-end gap-3 p-5 border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/50"
+    },
+    stats: {
+        wrapper: "grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6",
+        card: {
+            base: "p-3 sm:p-4 bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 transition-all hover:shadow-md hover:border-zinc-300 dark:hover:border-zinc-700",
+            icon: {
+                wrapper: "w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded-lg mb-2 sm:mb-3",
+                primary: "bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400",
+                success: "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400",
+                warning: "bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400",
+                danger: "bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400"
+            },
+            value: "text-xl sm:text-2xl font-bold text-zinc-900 dark:text-zinc-100",
+            label: "text-xs sm:text-sm text-zinc-500 dark:text-zinc-400 mt-0.5"
+        }
+    }
+};
+export function extendUsersPageTheme(overrides) {
+    return {
+        ...usersPageTheme,
+        ...overrides,
+        container: {
+            ...usersPageTheme.container,
+            ...overrides.container
+        },
+        header: {
+            ...usersPageTheme.header,
+            ...overrides.header
+        },
+        layout: {
+            ...usersPageTheme.layout,
+            ...overrides.layout
+        },
+        filters: {
+            ...usersPageTheme.filters,
+            ...overrides.filters
+        },
+        table: {
+            ...usersPageTheme.table,
+            ...overrides.table
+        },
+        userCard: {
+            ...usersPageTheme.userCard,
+            ...overrides.userCard
+        },
+        detailPanel: {
+            ...usersPageTheme.detailPanel,
+            ...overrides.detailPanel
+        },
+        pagination: {
+            ...usersPageTheme.pagination,
+            ...overrides.pagination
+        },
+        skeleton: {
+            ...usersPageTheme.skeleton,
+            ...overrides.skeleton
+        },
+        emptyState: {
+            ...usersPageTheme.emptyState,
+            ...overrides.emptyState
+        },
+        modal: {
+            ...usersPageTheme.modal,
+            ...overrides.modal
+        },
+        stats: {
+            ...usersPageTheme.stats,
+            ...overrides.stats
+        }
+    };
+}

package/dist/fe/components/UsersPage/types/index.js

@@ -0,0 +1 @@
+export { };

package/dist/fe/components/VerifyEmailPage/components/VerifyEmailPage.js

@@ -0,0 +1,290 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useEffect, useEffectEvent, useRef } from "react";
+import { cn } from "../../../utils/cn";
+import { useVerifyEmailStore } from "../store";
+import { verifyEmailPageTheme } from "../theme";
+gsap.registerPlugin(useGSAP);
+function parseErrorMessage(error, defaultMsg) {
+    if (!error?.message) return defaultMsg;
+    try {
+        const parsed = JSON.parse(error.message);
+        const msg = parsed.message || "";
+        if (msg.includes("Failed query") || msg.includes("select") || msg.includes("params:")) {
+            return "An error occurred. Please try again later.";
+        }
+        return msg || defaultMsg;
+    } catch  {
+        if (error.message.includes("Failed query") || error.message.includes("select")) {
+            return "An error occurred. Please try again later.";
+        }
+        return error.message;
+    }
+}
+export function VerifyEmailPage({ token, email: initialEmail = "", verifyEmailAction, resendVerificationAction, onSuccess, onBackToLogin, backToLoginHref, showResendForm = true, redirectDelay = 3000, className }) {
+    const theme = verifyEmailPageTheme;
+    const containerRef = useRef(null);
+    const cardRef = useRef(null);
+    const hasVerified = useRef(false);
+    const store = useVerifyEmailStore();
+    const setInitialEmail = useEffectEvent((email)=>{
+        if (email) {
+            store.setEmail(email);
+        }
+    });
+    const verifyToken = useEffectEvent((tokenValue)=>{
+        if (!tokenValue) {
+            store.setStep("error");
+            store.setMessage("Invalid verification link. No token provided.");
+            return;
+        }
+        if (hasVerified.current) return;
+        hasVerified.current = true;
+        verifyEmailAction.start({
+            payload: {
+                token: tokenValue
+            },
+            onAfterHandle: (response)=>{
+                if (!response) {
+                    store.setStep("error");
+                    store.setMessage("Verification failed. Please try again.");
+                    return;
+                }
+                if (response.success) {
+                    store.setStep("success");
+                    store.setMessage(response.message || "Email verified successfully!");
+                    setTimeout(()=>{
+                        if (onSuccess) {
+                            onSuccess();
+                        } else if (onBackToLogin) {
+                            onBackToLogin();
+                        }
+                    }, redirectDelay);
+                } else {
+                    store.setStep("error");
+                    store.setMessage(response.message || "Verification failed. Please try again.");
+                }
+            },
+            onErrorHandle: (error)=>{
+                store.setStep("error");
+                store.setMessage(parseErrorMessage(error, "Verification failed. Please try again."));
+            }
+        });
+    });
+    const decrementCooldownTick = useEffectEvent(()=>{
+        store.decrementCooldown();
+    });
+    useEffect(()=>{
+        setInitialEmail(initialEmail);
+    }, [
+        initialEmail
+    ]);
+    useEffect(()=>{
+        if (token) {
+            verifyToken(token);
+        } else {
+            store.setStep("error");
+            store.setMessage("Invalid verification link. No token provided.");
+        }
+        return ()=>{
+            store.reset();
+        };
+    }, [
+        token
+    ]);
+    useEffect(()=>{
+        if (store.cooldown <= 0) return;
+        const timer = setInterval(decrementCooldownTick, 1000);
+        return ()=>clearInterval(timer);
+    }, [
+        store.cooldown
+    ]);
+    useGSAP(()=>{
+        if (!cardRef.current) return;
+        gsap.fromTo(cardRef.current, {
+            opacity: 0,
+            y: 30,
+            scale: 0.95
+        }, {
+            opacity: 1,
+            y: 0,
+            scale: 1,
+            duration: 0.6,
+            ease: "power3.out"
+        });
+    }, {
+        scope: containerRef
+    });
+    const handleResend = useEffectEvent(()=>{
+        if (!store.email || store.cooldown > 0 || store.resendStatus === "loading" || !resendVerificationAction) return;
+        store.setResendStatus("loading");
+        store.setResendMessage("");
+        resendVerificationAction.start({
+            payload: {
+                email: store.email
+            },
+            onAfterHandle: (response)=>{
+                if (!response) {
+                    store.setResendStatus("error");
+                    store.setResendMessage("Failed to resend verification email.");
+                    return;
+                }
+                if (response.success) {
+                    store.setResendStatus("success");
+                    store.setResendMessage(response.message || "Verification email sent!");
+                    if (response.data?.cooldownSeconds) {
+                        store.setCooldown(response.data.cooldownSeconds);
+                    }
+                } else {
+                    store.setResendStatus("error");
+                    store.setResendMessage(response.message || "Failed to resend.");
+                    if (response.data?.cooldownRemaining) {
+                        store.setCooldown(response.data.cooldownRemaining);
+                    }
+                }
+            },
+            onErrorHandle: (error)=>{
+                store.setResendStatus("error");
+                store.setResendMessage(parseErrorMessage(error, "Failed to resend verification email."));
+            }
+        });
+    });
+    const handleBackToLogin = ()=>{
+        if (onBackToLogin) {
+            onBackToLogin();
+        } else if (backToLoginHref) {
+            window.location.href = backToLoginHref;
+        }
+    };
+    return /*#__PURE__*/ _jsx("main", {
+        ref: containerRef,
+        className: cn(theme.container.base, className),
+        children: /*#__PURE__*/ _jsx("article", {
+            ref: cardRef,
+            className: cn(theme.card.base, theme.card.background, theme.card.border, theme.card.shadow, theme.card.rounded),
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: theme.content.wrapper,
+                children: [
+                    store.step === "verifying" && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: theme.states.verifying.spinner
+                            }),
+                            /*#__PURE__*/ _jsx("h1", {
+                                className: theme.states.verifying.title,
+                                children: "Verifying Email"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: theme.states.verifying.subtitle,
+                                children: store.message
+                            })
+                        ]
+                    }),
+                    store.step === "success" && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: theme.states.success.iconWrapper,
+                                children: /*#__PURE__*/ _jsx("svg", {
+                                    className: theme.states.success.icon,
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    viewBox: "0 0 24 24",
+                                    "aria-hidden": "true",
+                                    children: /*#__PURE__*/ _jsx("path", {
+                                        strokeLinecap: "round",
+                                        strokeLinejoin: "round",
+                                        strokeWidth: 2,
+                                        d: "M5 13l4 4L19 7"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("h1", {
+                                className: theme.states.success.title,
+                                children: "Email Verified!"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: theme.states.success.subtitle,
+                                children: store.message
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: theme.states.success.redirectText,
+                                children: "Redirecting to login..."
+                            })
+                        ]
+                    }),
+                    store.step === "error" && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: theme.states.error.iconWrapper,
+                                children: /*#__PURE__*/ _jsx("svg", {
+                                    className: theme.states.error.icon,
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    viewBox: "0 0 24 24",
+                                    "aria-hidden": "true",
+                                    children: /*#__PURE__*/ _jsx("path", {
+                                        strokeLinecap: "round",
+                                        strokeLinejoin: "round",
+                                        strokeWidth: 2,
+                                        d: "M6 18L18 6M6 6l12 12"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("h1", {
+                                className: theme.states.error.title,
+                                children: "Verification Failed"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: theme.states.error.subtitle,
+                                children: store.message
+                            }),
+                            showResendForm && resendVerificationAction && /*#__PURE__*/ _jsxs("div", {
+                                className: theme.resendForm.wrapper,
+                                children: [
+                                    /*#__PURE__*/ _jsx("p", {
+                                        className: theme.resendForm.label,
+                                        children: "Request a new verification email:"
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "email",
+                                        value: store.email,
+                                        onChange: (e)=>store.setEmail(e.target.value),
+                                        placeholder: "Enter your email",
+                                        className: theme.resendForm.input
+                                    }),
+                                    /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: handleResend,
+                                        disabled: !store.email || store.cooldown > 0 || store.resendStatus === "loading",
+                                        className: theme.resendForm.button,
+                                        children: store.resendStatus === "loading" ? /*#__PURE__*/ _jsxs("span", {
+                                            className: theme.resendForm.buttonContent,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    className: theme.resendForm.buttonSpinner
+                                                }),
+                                                "Sending..."
+                                            ]
+                                        }) : store.cooldown > 0 ? `Resend in ${store.cooldown}s` : "Resend Verification Email"
+                                    }),
+                                    store.resendMessage && /*#__PURE__*/ _jsx("p", {
+                                        className: store.resendStatus === "success" ? theme.resendForm.messageSuccess : theme.resendForm.messageError,
+                                        children: store.resendMessage
+                                    })
+                                ]
+                            }),
+                            (onBackToLogin || backToLoginHref) && /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: handleBackToLogin,
+                                className: theme.backButton,
+                                children: "Go to Login"
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+}

package/dist/fe/components/VerifyEmailPage/index.js

@@ -0,0 +1,3 @@
+export { VerifyEmailPage } from "./components/VerifyEmailPage";
+export { useVerifyEmailStore } from "./store";
+export { extendVerifyEmailPageTheme, verifyEmailPageTheme } from "./theme";