nucleus-core-ts 0.8.6 → 0.8.8

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

@@ -0,0 +1,98 @@
+export const setPasswordPageTheme = {
+    container: {
+        base: "min-h-screen flex items-center justify-center bg-gradient-to-br from-zinc-50 via-zinc-100 to-zinc-200 dark:from-zinc-900 dark:via-zinc-900 dark:to-zinc-800 px-4 sm:px-6 lg:px-8",
+        wrapper: "w-full max-w-md relative z-10"
+    },
+    card: {
+        base: "relative overflow-hidden",
+        padding: "p-6 sm:p-8 lg:p-10",
+        background: "bg-white dark:bg-zinc-800",
+        border: "border border-zinc-200 dark:border-zinc-700",
+        shadow: "shadow-xl",
+        rounded: "rounded-2xl"
+    },
+    header: {
+        wrapper: "text-center mb-6 sm:mb-8",
+        logo: "mx-auto mb-4 sm:mb-6",
+        title: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white mb-2 sm:mb-3",
+        subtitle: "text-sm sm:text-base text-zinc-600 dark:text-zinc-400"
+    },
+    form: {
+        wrapper: "space-y-4 sm:space-y-5",
+        inputGroup: "space-y-1",
+        label: "block text-sm font-medium text-zinc-700 dark:text-zinc-300",
+        input: "w-full px-3 sm:px-4 py-2 sm:py-3 border border-zinc-300 dark:border-zinc-600 rounded-xl bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200",
+        error: "text-sm text-red-500 dark:text-red-400 mt-1",
+        submitButton: "w-full py-2.5 sm:py-3 px-4 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium rounded-xl transition-colors duration-200 shadow-sm hover:shadow-md",
+        backLink: "w-full mt-3 sm:mt-4 text-center",
+        backLinkText: "text-sm text-blue-600 dark:text-blue-400 hover:underline cursor-pointer"
+    },
+    alert: {
+        error: "mb-4 p-3 sm:p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl text-red-600 dark:text-red-400 text-sm",
+        success: "text-center"
+    },
+    states: {
+        verifying: {
+            wrapper: "text-center py-8",
+            iconWrapper: "mx-auto w-16 h-16 sm:w-20 sm:h-20 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mb-6",
+            spinner: "animate-spin rounded-full h-8 w-8 sm:h-10 sm:w-10 border-3 border-blue-600 border-t-transparent",
+            title: "text-xl sm:text-2xl font-bold text-zinc-900 dark:text-white mb-3",
+            subtitle: "text-zinc-600 dark:text-zinc-400 text-sm sm:text-base"
+        },
+        error: {
+            iconWrapper: "mx-auto w-16 h-16 sm:w-20 sm:h-20 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-6",
+            icon: "w-8 h-8 sm:w-10 sm:h-10 text-red-500 dark:text-red-400",
+            title: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white mb-3",
+            subtitle: "text-zinc-600 dark:text-zinc-400 mb-2 text-sm sm:text-base",
+            errorMessage: "text-red-500 dark:text-red-400 text-sm mb-4 px-4 py-2 bg-red-50 dark:bg-red-900/20 rounded-lg",
+            helpText: "text-zinc-500 dark:text-zinc-500 text-sm mb-8",
+            buttonPrimary: "w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-xl transition-colors duration-200 shadow-sm hover:shadow-md",
+            buttonSecondary: "w-full py-3 px-4 bg-zinc-100 dark:bg-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-600 text-zinc-700 dark:text-zinc-300 font-medium rounded-xl transition-colors duration-200"
+        },
+        success: {
+            iconWrapper: "mx-auto w-16 h-16 sm:w-20 sm:h-20 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-6",
+            icon: "w-8 h-8 sm:w-10 sm:h-10 text-green-500 dark:text-green-400",
+            title: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white mb-3",
+            subtitle: "text-zinc-600 dark:text-zinc-400 text-sm sm:text-base mb-6",
+            redirectSpinner: "animate-spin rounded-full h-4 w-4 border-2 border-zinc-400 border-t-transparent",
+            redirectText: "text-zinc-500 dark:text-zinc-400 text-sm"
+        }
+    },
+    footer: "text-center text-zinc-500 dark:text-zinc-500 text-xs mt-6",
+    layout: {
+        textCenter: "text-center",
+        buttonGroup: "space-y-3",
+        redirectWrapper: "flex items-center justify-center gap-2"
+    },
+    passwordStrength: {
+        container: "mt-3 space-y-3",
+        bar: {
+            wrapper: "flex gap-1",
+            segment: "h-1 flex-1 rounded-full transition-colors duration-200",
+            inactive: "bg-zinc-200 dark:bg-zinc-700",
+            active: {
+                weak: "bg-red-500",
+                fair: "bg-orange-500",
+                good: "bg-yellow-500",
+                strong: "bg-green-500",
+                veryStrong: "bg-emerald-500"
+            }
+        },
+        requirements: {
+            container: "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-600 dark:text-green-400",
+                unmet: "text-zinc-400 dark:text-zinc-500"
+            }
+        }
+    }
+};
+export function extendSetPasswordPageTheme(overrides) {
+    return {
+        ...setPasswordPageTheme,
+        ...overrides
+    };
+}

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

@@ -0,0 +1,12 @@
+export const DEFAULT_PASSWORD_POLICY = {
+    minLength: 8,
+    maxLength: 128,
+    requireUppercase: true,
+    requireLowercase: true,
+    requireNumber: true,
+    requireSpecialChar: false,
+    specialChars: "!@#$%^&*()_+-=[]{}|;:,.<>?",
+    preventCommonPasswords: true,
+    preventUserInfoInPassword: true,
+    showStrengthIndicator: true
+};

package/dist/fe/components/UsersPage/components/InviteUserModal.js

@@ -0,0 +1,262 @@
+"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, useRef, useState } from "react";
+import { cn } from "../../../utils/cn";
+import { Button } from "../../Button";
+import { NucleusTextInput } from "../../NucleusTextInput";
+gsap.registerPlugin(useGSAP);
+export function InviteUserModal({ theme, isOpen, isLoading, onClose, onInvite }) {
+    const [email, setEmail] = useState("");
+    const [error, setError] = useState("");
+    const overlayRef = useRef(null);
+    const modalRef = useRef(null);
+    useGSAP(()=>{
+        if (!overlayRef.current || !modalRef.current) return;
+        if (isOpen) {
+            gsap.fromTo(overlayRef.current, {
+                opacity: 0
+            }, {
+                opacity: 1,
+                duration: 0.2,
+                ease: "power2.out"
+            });
+            gsap.fromTo(modalRef.current, {
+                opacity: 0,
+                scale: 0.95,
+                y: 20
+            }, {
+                opacity: 1,
+                scale: 1,
+                y: 0,
+                duration: 0.3,
+                ease: "back.out(1.7)"
+            });
+        }
+    }, {
+        dependencies: [
+            isOpen
+        ]
+    });
+    useEffect(()=>{
+        if (isOpen) {
+            setEmail("");
+            setError("");
+        }
+    }, [
+        isOpen
+    ]);
+    useEffect(()=>{
+        const handleEscape = (e)=>{
+            if (e.key === "Escape" && isOpen && !isLoading) {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", handleEscape);
+        return ()=>document.removeEventListener("keydown", handleEscape);
+    }, [
+        isOpen,
+        isLoading,
+        onClose
+    ]);
+    const validateEmail = (email)=>{
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+    const handleSubmit = ()=>{
+        if (!email.trim()) {
+            setError("Email is required");
+            return;
+        }
+        if (!validateEmail(email)) {
+            setError("Please enter a valid email address");
+            return;
+        }
+        setError("");
+        onInvite(email.trim());
+    };
+    const handleKeyDown = (e)=>{
+        if (e.key === "Enter" && !isLoading) {
+            handleSubmit();
+        }
+    };
+    if (!isOpen) return null;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                ref: overlayRef,
+                className: cn(theme.modal.overlay),
+                onClick: ()=>!isLoading && onClose(),
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    ref: modalRef,
+                    className: cn(theme.modal.wrapper),
+                    role: "dialog",
+                    "aria-modal": "true",
+                    "aria-labelledby": "invite-modal-title",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: cn(theme.modal.header.wrapper),
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex items-center gap-3",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: cn(theme.modal.header.icon),
+                                            children: /*#__PURE__*/ _jsx("svg", {
+                                                className: "w-5 h-5",
+                                                fill: "none",
+                                                stroke: "currentColor",
+                                                viewBox: "0 0 24 24",
+                                                "aria-hidden": "true",
+                                                children: /*#__PURE__*/ _jsx("path", {
+                                                    strokeLinecap: "round",
+                                                    strokeLinejoin: "round",
+                                                    strokeWidth: 2,
+                                                    d: "M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
+                                                })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            children: [
+                                                /*#__PURE__*/ _jsx("h2", {
+                                                    id: "invite-modal-title",
+                                                    className: cn(theme.modal.header.title),
+                                                    children: "Invite User"
+                                                }),
+                                                /*#__PURE__*/ _jsx("p", {
+                                                    className: cn(theme.modal.header.subtitle),
+                                                    children: "Send an invitation email to add a new user"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "ghost",
+                                    size: "sm",
+                                    onClick: onClose,
+                                    disabled: isLoading,
+                                    "aria-label": "Close modal",
+                                    iconOnly: true,
+                                    children: /*#__PURE__*/ _jsx("svg", {
+                                        className: "w-5 h-5",
+                                        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("div", {
+                            className: cn(theme.modal.content),
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                className: "space-y-4",
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("label", {
+                                                htmlFor: "invite-email",
+                                                className: "block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5",
+                                                children: "Email Address"
+                                            }),
+                                            /*#__PURE__*/ _jsx(NucleusTextInput, {
+                                                id: "invite-email",
+                                                type: "email",
+                                                value: email,
+                                                onChange: setEmail,
+                                                onKeyDown: handleKeyDown,
+                                                placeholder: "colleague@company.com",
+                                                size: "md",
+                                                disabled: isLoading,
+                                                errorMessage: error || undefined,
+                                                leftIcon: /*#__PURE__*/ _jsx("svg", {
+                                                    className: "w-4 h-4",
+                                                    fill: "none",
+                                                    stroke: "currentColor",
+                                                    viewBox: "0 0 24 24",
+                                                    "aria-hidden": "true",
+                                                    children: /*#__PURE__*/ _jsx("path", {
+                                                        strokeLinecap: "round",
+                                                        strokeLinejoin: "round",
+                                                        strokeWidth: 2,
+                                                        d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                                                    })
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: cn(theme.modal.infoBox),
+                                        children: [
+                                            /*#__PURE__*/ _jsx("svg", {
+                                                className: "w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5",
+                                                fill: "none",
+                                                stroke: "currentColor",
+                                                viewBox: "0 0 24 24",
+                                                "aria-hidden": "true",
+                                                children: /*#__PURE__*/ _jsx("path", {
+                                                    strokeLinecap: "round",
+                                                    strokeLinejoin: "round",
+                                                    strokeWidth: 2,
+                                                    d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx("p", {
+                                                className: "text-sm text-zinc-600 dark:text-zinc-400",
+                                                children: "The user will receive an email with a secure link to set their password and complete registration."
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: cn(theme.modal.footer),
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "outline",
+                                    size: "md",
+                                    onClick: onClose,
+                                    disabled: isLoading,
+                                    children: "Cancel"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "primary",
+                                    size: "md",
+                                    onClick: handleSubmit,
+                                    loading: isLoading,
+                                    leftIcon: /*#__PURE__*/ _jsx("svg", {
+                                        className: "w-4 h-4",
+                                        fill: "none",
+                                        stroke: "currentColor",
+                                        viewBox: "0 0 24 24",
+                                        "aria-hidden": "true",
+                                        children: /*#__PURE__*/ _jsx("path", {
+                                            strokeLinecap: "round",
+                                            strokeLinejoin: "round",
+                                            strokeWidth: 2,
+                                            d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+                                        })
+                                    }),
+                                    children: "Send Invitation"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}

package/dist/fe/components/UsersPage/components/Pagination.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn";
+import { Button } from "../../Button";
+import { SelectBox } from "../../SelectBox";
+export function Pagination({ theme, currentPage, totalPages, totalItems, pageSize, pageSizeOptions = [
+    10,
+    25,
+    50,
+    100
+], onPageChange, onPageSizeChange }) {
+    const startItem = (currentPage - 1) * pageSize + 1;
+    const endItem = Math.min(currentPage * pageSize, totalItems);
+    const pageSizeSelectOptions = pageSizeOptions.map((size)=>({
+            value: String(size),
+            label: `${size} / page`
+        }));
+    const getVisiblePages = ()=>{
+        const pages = [];
+        const maxVisible = 5;
+        if (totalPages <= maxVisible) {
+            for(let i = 1; i <= totalPages; i++){
+                pages.push(i);
+            }
+        } else {
+            pages.push(1);
+            if (currentPage > 3) {
+                pages.push("ellipsis");
+            }
+            const start = Math.max(2, currentPage - 1);
+            const end = Math.min(totalPages - 1, currentPage + 1);
+            for(let i = start; i <= end; i++){
+                pages.push(i);
+            }
+            if (currentPage < totalPages - 2) {
+                pages.push("ellipsis");
+            }
+            if (totalPages > 1) {
+                pages.push(totalPages);
+            }
+        }
+        return pages;
+    };
+    if (totalItems === 0) return null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn(theme.pagination.wrapper),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: cn(theme.pagination.info),
+                children: [
+                    /*#__PURE__*/ _jsxs("span", {
+                        className: "hidden sm:inline",
+                        children: [
+                            "Showing ",
+                            startItem,
+                            "-",
+                            endItem,
+                            " of ",
+                            totalItems,
+                            " users"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("span", {
+                        className: "sm:hidden",
+                        children: [
+                            startItem,
+                            "-",
+                            endItem,
+                            " / ",
+                            totalItems
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-3",
+                children: [
+                    /*#__PURE__*/ _jsx(SelectBox, {
+                        options: pageSizeSelectOptions,
+                        value: String(pageSize),
+                        onChange: (val)=>{
+                            if (val) onPageSizeChange(Number(val));
+                        },
+                        size: "sm",
+                        className: "min-w-[100px]"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: cn(theme.pagination.controls.wrapper),
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "ghost",
+                                size: "sm",
+                                onClick: ()=>onPageChange(currentPage - 1),
+                                disabled: currentPage === 1,
+                                "aria-label": "Previous page",
+                                iconOnly: true,
+                                children: /*#__PURE__*/ _jsx("svg", {
+                                    className: "w-4 h-4",
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    viewBox: "0 0 24 24",
+                                    "aria-hidden": "true",
+                                    children: /*#__PURE__*/ _jsx("path", {
+                                        strokeLinecap: "round",
+                                        strokeLinejoin: "round",
+                                        strokeWidth: 2,
+                                        d: "M15 19l-7-7 7-7"
+                                    })
+                                })
+                            }),
+                            getVisiblePages().map((page, idx)=>page === "ellipsis" ? /*#__PURE__*/ _jsx("span", {
+                                    className: "px-2 text-zinc-400 dark:text-zinc-600",
+                                    children: "..."
+                                }, `ellipsis-${idx}`) : /*#__PURE__*/ _jsx(Button, {
+                                    variant: page === currentPage ? "primary" : "ghost",
+                                    size: "sm",
+                                    onClick: ()=>onPageChange(page),
+                                    children: page
+                                }, page)),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "ghost",
+                                size: "sm",
+                                onClick: ()=>onPageChange(currentPage + 1),
+                                disabled: currentPage === totalPages,
+                                "aria-label": "Next page",
+                                iconOnly: true,
+                                children: /*#__PURE__*/ _jsx("svg", {
+                                    className: "w-4 h-4",
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    viewBox: "0 0 24 24",
+                                    "aria-hidden": "true",
+                                    children: /*#__PURE__*/ _jsx("path", {
+                                        strokeLinecap: "round",
+                                        strokeLinejoin: "round",
+                                        strokeWidth: 2,
+                                        d: "M9 5l7 7-7 7"
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}