nucleus-core-ts 0.8.6 → 0.8.8

package/dist/fe/components/RegisterPage/components/RegisterHeader.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { registerPageTheme } from "../theme";
+export function RegisterHeader({ logo, title = "Create Account", subtitle = "Sign up to get started" }) {
+    const theme = registerPageTheme;
+    return /*#__PURE__*/ _jsxs("header", {
+        className: theme.header.container,
+        children: [
+            logo && /*#__PURE__*/ _jsx("div", {
+                className: theme.header.logoWrapper,
+                children: logo
+            }),
+            /*#__PURE__*/ _jsx("h1", {
+                className: theme.header.title,
+                children: title
+            }),
+            subtitle && /*#__PURE__*/ _jsx("p", {
+                className: theme.header.subtitle,
+                children: subtitle
+            })
+        ]
+    });
+}

package/dist/fe/components/RegisterPage/components/RegisterPage.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useRef } from "react";
+import { cn } from "../../../utils/cn";
+import { AbstractAnimatedBackground } from "../../AbstractAnimatedBackground";
+import { registerPageTheme } from "../theme";
+import { RegisterForm } from "./RegisterForm";
+import { RegisterHeader } from "./RegisterHeader";
+gsap.registerPlugin(useGSAP);
+export function RegisterPage({ variant: _variant = "default", logo, title = "Create Account", subtitle = "Sign up to get started with your account", showFirstName: showFirstNameProp, showLastName: showLastNameProp, showTerms = true, showSignIn = true, termsHref: termsHrefProp, privacyHref: privacyHrefProp, signInHref, registerAction, onTermsClick, onPrivacyClick, onSignIn, onSuccess, showBackground = true, className, passwordMinLength: passwordMinLengthProp, requireUppercase: requireUppercaseProp, requireLowercase: requireLowercaseProp, requireNumber: requireNumberProp, requireSpecialChar: requireSpecialCharProp, config }) {
+    // Resolve values from config or props (config takes precedence)
+    const showFirstName = config?.register?.showFirstName ?? showFirstNameProp ?? false;
+    const showLastName = config?.register?.showLastName ?? showLastNameProp ?? false;
+    const termsHref = config?.register?.termsUrl ?? termsHrefProp;
+    const privacyHref = config?.register?.privacyUrl ?? privacyHrefProp;
+    const passwordMinLength = config?.passwordPolicy?.minLength ?? passwordMinLengthProp ?? 8;
+    const requireUppercase = config?.passwordPolicy?.requireUppercase ?? requireUppercaseProp ?? true;
+    const requireLowercase = config?.passwordPolicy?.requireLowercase ?? requireLowercaseProp ?? true;
+    const requireNumber = config?.passwordPolicy?.requireNumber ?? requireNumberProp ?? true;
+    const requireSpecialChar = config?.passwordPolicy?.requireSpecialChar ?? requireSpecialCharProp ?? false;
+    const createProfileOnRegister = config?.register?.createProfileOnRegister ?? (showFirstName || showLastName);
+    const theme = registerPageTheme;
+    const containerRef = useRef(null);
+    const cardRef = useRef(null);
+    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
+    });
+    return /*#__PURE__*/ _jsxs("main", {
+        ref: containerRef,
+        className: cn(theme.container.base, className),
+        "aria-label": "Registration page",
+        children: [
+            showBackground && /*#__PURE__*/ _jsx(AbstractAnimatedBackground, {}),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.container.wrapper,
+                children: /*#__PURE__*/ _jsxs("article", {
+                    ref: cardRef,
+                    className: cn(theme.card.base, theme.card.padding, theme.card.background, theme.card.border, theme.card.shadow, theme.card.rounded),
+                    children: [
+                        /*#__PURE__*/ _jsx(RegisterHeader, {
+                            logo: logo,
+                            title: title,
+                            subtitle: subtitle
+                        }),
+                        /*#__PURE__*/ _jsx(RegisterForm, {
+                            registerAction: registerAction,
+                            showFirstName: showFirstName,
+                            showLastName: showLastName,
+                            showTerms: showTerms,
+                            showSignIn: showSignIn,
+                            termsHref: termsHref,
+                            privacyHref: privacyHref,
+                            signInHref: signInHref,
+                            onTermsClick: onTermsClick,
+                            onPrivacyClick: onPrivacyClick,
+                            onSignIn: onSignIn,
+                            onSuccess: onSuccess,
+                            passwordMinLength: passwordMinLength,
+                            requireUppercase: requireUppercase,
+                            requireLowercase: requireLowercase,
+                            requireNumber: requireNumber,
+                            requireSpecialChar: requireSpecialChar,
+                            createProfileOnRegister: createProfileOnRegister
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,6 @@
+export { PasswordStrengthIndicator } from "./components/PasswordStrengthIndicator";
+export { RegisterForm } from "./components/RegisterForm";
+export { RegisterHeader } from "./components/RegisterHeader";
+export { RegisterPage } from "./components/RegisterPage";
+export { useRegisterStore } from "./store";
+export { extendRegisterPageTheme, registerPageTheme } from "./theme";

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

@@ -0,0 +1,106 @@
+"use client";
+import { batch, createStore } from "h-state";
+const calculatePasswordStrength = (password, minLength = 8)=>{
+    const hasMinLength = password.length >= minLength;
+    const hasUppercase = /[A-Z]/.test(password);
+    const hasLowercase = /[a-z]/.test(password);
+    const hasNumber = /[0-9]/.test(password);
+    const hasSpecialChar = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password);
+    let score = 0;
+    if (hasMinLength) score += 1;
+    if (hasUppercase) score += 1;
+    if (hasLowercase) score += 1;
+    if (hasNumber) score += 1;
+    if (hasSpecialChar) score += 1;
+    return {
+        score,
+        hasMinLength,
+        hasUppercase,
+        hasLowercase,
+        hasNumber,
+        hasSpecialChar
+    };
+};
+const initialState = {
+    email: "",
+    password: "",
+    confirmPassword: "",
+    firstName: "",
+    lastName: "",
+    acceptTerms: false,
+    isLoading: false,
+    error: null,
+    passwordStrength: {
+        score: 0,
+        hasMinLength: false,
+        hasUppercase: false,
+        hasLowercase: false,
+        hasNumber: false,
+        hasSpecialChar: false
+    }
+};
+export const { useStore: useRegisterStore } = createStore(initialState, {
+    setEmail: (store)=>(email)=>{
+            store.email = email;
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setPassword: (store)=>(password, minLength = 8)=>{
+            store.password = password;
+            store.passwordStrength = calculatePasswordStrength(password, minLength);
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setConfirmPassword: (store)=>(confirmPassword)=>{
+            store.confirmPassword = confirmPassword;
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setFirstName: (store)=>(firstName)=>{
+            store.firstName = firstName;
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setLastName: (store)=>(lastName)=>{
+            store.lastName = lastName;
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setAcceptTerms: (store)=>(value)=>{
+            store.acceptTerms = value;
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setLoading: (store)=>(value)=>{
+            store.isLoading = value;
+        },
+    setError: (store)=>(error)=>{
+            store.error = error;
+        },
+    reset: (store)=>()=>{
+            batch(()=>{
+                store.email = "";
+                store.password = "";
+                store.confirmPassword = "";
+                store.firstName = "";
+                store.lastName = "";
+                store.acceptTerms = false;
+                store.isLoading = false;
+                store.error = null;
+                store.passwordStrength = {
+                    score: 0,
+                    hasMinLength: false,
+                    hasUppercase: false,
+                    hasLowercase: false,
+                    hasNumber: false,
+                    hasSpecialChar: false
+                };
+            });
+        }
+});

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

@@ -0,0 +1,128 @@
+export const registerPageTheme = {
+    container: {
+        base: "relative min-h-screen w-full flex items-center justify-center py-8 sm:py-12",
+        wrapper: "relative z-10 w-full max-w-md px-4 sm:px-0"
+    },
+    card: {
+        base: "w-full",
+        padding: "p-6 sm:p-8",
+        background: "bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl",
+        border: "border border-white/20 dark:border-zinc-800/50",
+        shadow: "shadow-2xl shadow-black/10 dark:shadow-black/30",
+        rounded: "rounded-2xl sm:rounded-3xl"
+    },
+    header: {
+        container: "flex flex-col items-center mb-8",
+        logoWrapper: "mb-4",
+        title: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white text-center",
+        subtitle: "mt-2 text-sm sm:text-base text-zinc-600 dark:text-zinc-400 text-center"
+    },
+    form: {
+        container: "w-full",
+        spacing: "space-y-4",
+        row: "grid grid-cols-1 sm:grid-cols-2 gap-4"
+    },
+    input: {
+        wrapper: "w-full"
+    },
+    checkbox: {
+        wrapper: "flex items-start",
+        label: "ml-2 text-sm text-zinc-600 dark:text-zinc-400 select-none cursor-pointer leading-tight"
+    },
+    links: {
+        container: "flex items-center justify-between mt-1",
+        terms: "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors cursor-pointer",
+        signIn: {
+            wrapper: "mt-6 text-center",
+            text: "text-sm text-zinc-600 dark:text-zinc-400",
+            link: "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium transition-colors cursor-pointer"
+        }
+    },
+    button: {
+        wrapper: "mt-6"
+    },
+    error: {
+        container: "mb-4 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800",
+        text: "text-sm text-red-600 dark:text-red-400 text-center"
+    },
+    passwordStrength: {
+        container: "mt-2",
+        bar: {
+            wrapper: "flex gap-1",
+            segment: "h-1 flex-1 rounded-full transition-colors duration-300",
+            active: {
+                weak: "bg-red-500",
+                fair: "bg-orange-500",
+                good: "bg-yellow-500",
+                strong: "bg-lime-500",
+                veryStrong: "bg-green-500"
+            },
+            inactive: "bg-zinc-200 dark:bg-zinc-700"
+        },
+        requirements: {
+            container: "mt-3 space-y-1",
+            item: "flex items-center gap-2 text-xs transition-colors duration-200",
+            met: "text-green-600 dark:text-green-400",
+            unmet: "text-zinc-400 dark:text-zinc-500",
+            icon: {
+                met: "text-green-500",
+                unmet: "text-zinc-300 dark:text-zinc-600"
+            }
+        }
+    },
+    divider: {
+        container: "relative my-6",
+        line: "absolute inset-0 flex items-center",
+        text: "relative flex justify-center text-sm"
+    }
+};
+export function extendRegisterPageTheme(overrides) {
+    return {
+        ...registerPageTheme,
+        ...overrides,
+        container: {
+            ...registerPageTheme.container,
+            ...overrides.container
+        },
+        card: {
+            ...registerPageTheme.card,
+            ...overrides.card
+        },
+        header: {
+            ...registerPageTheme.header,
+            ...overrides.header
+        },
+        form: {
+            ...registerPageTheme.form,
+            ...overrides.form
+        },
+        input: {
+            ...registerPageTheme.input,
+            ...overrides.input
+        },
+        checkbox: {
+            ...registerPageTheme.checkbox,
+            ...overrides.checkbox
+        },
+        links: {
+            ...registerPageTheme.links,
+            ...overrides.links
+        },
+        button: {
+            ...registerPageTheme.button,
+            ...overrides.button
+        },
+        error: {
+            ...registerPageTheme.error,
+            ...overrides.error
+        },
+        passwordStrength: {
+            ...registerPageTheme.passwordStrength,
+            ...overrides.passwordStrength
+        },
+        divider: {
+            ...registerPageTheme.divider,
+            ...overrides.divider
+        }
+    };
+}

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

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