nucleus-core-ts 0.8.7 → 0.8.8

package/dist/fe/components/ChangePasswordPage/components/ChangePasswordPage.js

@@ -0,0 +1,60 @@
+"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 { changePasswordPageTheme } from "../theme";
+import { ChangePasswordForm } from "./ChangePasswordForm";
+import { ChangePasswordHeader } from "./ChangePasswordHeader";
+gsap.registerPlugin(useGSAP);
+export function ChangePasswordPage({ logo, title = "Change Password", subtitle = "Enter your current password and choose a new one.", changePasswordAction, onSuccess, onCancel, cancelHref, showBackground = true, className }) {
+    const theme = changePasswordPageTheme;
+    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": "Change password 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(ChangePasswordHeader, {
+                            logo: logo,
+                            title: title,
+                            subtitle: subtitle
+                        }),
+                        /*#__PURE__*/ _jsx(ChangePasswordForm, {
+                            changePasswordAction: changePasswordAction,
+                            onSuccess: onSuccess,
+                            onCancel: onCancel,
+                            cancelHref: cancelHref
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,5 @@
+export { ChangePasswordForm } from "./components/ChangePasswordForm";
+export { ChangePasswordHeader } from "./components/ChangePasswordHeader";
+export { ChangePasswordPage } from "./components/ChangePasswordPage";
+export { useChangePasswordStore } from "./store";
+export { changePasswordPageTheme, extendChangePasswordPageTheme } from "./theme";

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

@@ -0,0 +1,44 @@
+"use client";
+import { batch, createStore } from "h-state";
+const initialState = {
+    currentPassword: "",
+    newPassword: "",
+    confirmPassword: "",
+    step: "form",
+    error: null
+};
+export const { useStore: useChangePasswordStore } = createStore(initialState, {
+    setCurrentPassword: (store)=>(password)=>{
+            store.currentPassword = password;
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setNewPassword: (store)=>(password)=>{
+            store.newPassword = password;
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setConfirmPassword: (store)=>(password)=>{
+            store.confirmPassword = password;
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setStep: (store)=>(step)=>{
+            store.step = step;
+        },
+    setError: (store)=>(error)=>{
+            store.error = error;
+        },
+    reset: (store)=>()=>{
+            batch(()=>{
+                store.currentPassword = "";
+                store.newPassword = "";
+                store.confirmPassword = "";
+                store.step = "form";
+                store.error = null;
+            });
+        }
+});

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

@@ -0,0 +1,87 @@
+export const changePasswordPageTheme = {
+    container: {
+        base: "relative min-h-screen w-full flex items-center justify-center",
+        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",
+        iconWrapper: "mb-4 w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center",
+        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 max-w-sm"
+    },
+    form: {
+        container: "w-full",
+        spacing: "space-y-4"
+    },
+    input: {
+        wrapper: "w-full"
+    },
+    button: {
+        wrapper: "mt-6"
+    },
+    links: {
+        container: "mt-6 text-center",
+        cancel: "text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white font-medium transition-colors cursor-pointer inline-flex items-center gap-1"
+    },
+    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"
+    },
+    success: {
+        container: "flex flex-col items-center text-center",
+        iconWrapper: "mb-4 w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center",
+        title: "text-xl font-semibold text-zinc-900 dark:text-white mb-2",
+        message: "text-sm text-zinc-600 dark:text-zinc-400 max-w-sm"
+    }
+};
+export function extendChangePasswordPageTheme(overrides) {
+    return {
+        ...changePasswordPageTheme,
+        ...overrides,
+        container: {
+            ...changePasswordPageTheme.container,
+            ...overrides.container
+        },
+        card: {
+            ...changePasswordPageTheme.card,
+            ...overrides.card
+        },
+        header: {
+            ...changePasswordPageTheme.header,
+            ...overrides.header
+        },
+        form: {
+            ...changePasswordPageTheme.form,
+            ...overrides.form
+        },
+        input: {
+            ...changePasswordPageTheme.input,
+            ...overrides.input
+        },
+        button: {
+            ...changePasswordPageTheme.button,
+            ...overrides.button
+        },
+        links: {
+            ...changePasswordPageTheme.links,
+            ...overrides.links
+        },
+        error: {
+            ...changePasswordPageTheme.error,
+            ...overrides.error
+        },
+        success: {
+            ...changePasswordPageTheme.success,
+            ...overrides.success
+        }
+    };
+}

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

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

package/dist/fe/components/Checkbox/components/Checkbox.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useId, useRef } from "react";
+import { checkboxTheme } from "../theme";
+import { cn } from "../utils/cn";
+import { CheckboxIcon } from "./CheckboxIcon";
+import { SwitchTrack } from "./SwitchTrack";
+gsap.registerPlugin(useGSAP);
+export function Checkbox({ checked, onChange, variant = "checkbox", size = "md", color = "primary", label, labelPosition = "right", disabled = false, indeterminate = false, name, value, id, required = false, errorMessage, helperText, className, labelClassName, ariaLabel, ariaDescribedBy }) {
+    const containerRef = useRef(null);
+    const inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const generatedId = useId();
+    const inputId = id || generatedId;
+    const theme = checkboxTheme;
+    const { contextSafe } = useGSAP({
+        scope: containerRef
+    });
+    const handleChange = contextSafe(()=>{
+        if (disabled) return;
+        if (wrapperRef.current) {
+            gsap.to(wrapperRef.current, {
+                scale: 0.97,
+                duration: 0.1,
+                ease: "power2.out",
+                onComplete: ()=>{
+                    gsap.to(wrapperRef.current, {
+                        scale: 1,
+                        duration: 0.15,
+                        ease: "elastic.out(1, 0.5)"
+                    });
+                }
+            });
+        }
+        onChange(!checked);
+    });
+    const handleKeyDown = (e)=>{
+        if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            handleChange();
+        }
+    };
+    const renderControl = ()=>{
+        if (variant === "switch") {
+            return /*#__PURE__*/ _jsx(SwitchTrack, {
+                checked: checked,
+                size: size,
+                color: color,
+                disabled: disabled
+            });
+        }
+        return /*#__PURE__*/ _jsx(CheckboxIcon, {
+            checked: checked,
+            indeterminate: indeterminate,
+            size: size,
+            color: color,
+            disabled: disabled
+        });
+    };
+    const renderLabel = ()=>{
+        if (!label) return null;
+        return /*#__PURE__*/ _jsxs("span", {
+            className: cn(theme.label.base, theme.label.text.size[size], theme.label.text.color.light, theme.label.text.color.dark, disabled && theme.label.disabled, labelClassName),
+            children: [
+                label,
+                required && /*#__PURE__*/ _jsx("span", {
+                    className: "text-red-500 ml-0.5",
+                    children: "*"
+                })
+            ]
+        });
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: containerRef,
+        className: cn(theme.container.base, theme.container.spacing, disabled && theme.container.disabled, className),
+        children: [
+            /*#__PURE__*/ _jsxs("label", {
+                ref: wrapperRef,
+                htmlFor: inputId,
+                className: cn(theme.wrapper.base, theme.wrapper.gap[size], disabled && "cursor-not-allowed", labelPosition === "left" && "flex-row-reverse"),
+                onKeyDown: handleKeyDown,
+                children: [
+                    /*#__PURE__*/ _jsx("input", {
+                        ref: inputRef,
+                        type: "checkbox",
+                        id: inputId,
+                        name: name,
+                        value: value,
+                        checked: checked,
+                        disabled: disabled,
+                        required: required,
+                        onChange: handleChange,
+                        className: "sr-only",
+                        "aria-label": ariaLabel || (typeof label === "string" ? label : undefined),
+                        "aria-describedby": ariaDescribedBy,
+                        "aria-checked": indeterminate ? "mixed" : checked,
+                        "aria-invalid": !!errorMessage
+                    }),
+                    renderControl(),
+                    renderLabel()
+                ]
+            }),
+            errorMessage && /*#__PURE__*/ _jsx("span", {
+                className: cn(theme.errorText.base, theme.errorText.text, theme.errorText.color),
+                children: errorMessage
+            }),
+            helperText && !errorMessage && /*#__PURE__*/ _jsx("span", {
+                className: cn(theme.helperText.base, theme.helperText.text, theme.helperText.color.light, theme.helperText.color.dark),
+                children: helperText
+            })
+        ]
+    });
+}

package/dist/fe/components/Checkbox/components/CheckboxIcon.js

@@ -0,0 +1,119 @@
+"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 { checkboxTheme } from "../theme";
+import { cn } from "../utils/cn";
+gsap.registerPlugin(useGSAP);
+export function CheckboxIcon({ checked, indeterminate = false, size, color, disabled = false }) {
+    const containerRef = useRef(null);
+    const checkRef = useRef(null);
+    const indeterminateRef = useRef(null);
+    const rippleRef = useRef(null);
+    const theme = checkboxTheme;
+    useGSAP(()=>{
+        if (!containerRef.current) return;
+        const tl = gsap.timeline();
+        if (checked && !indeterminate) {
+            tl.to(containerRef.current, {
+                borderColor: "transparent",
+                duration: 0.15,
+                ease: "power2.out"
+            });
+            if (checkRef.current) {
+                const pathLength = checkRef.current.getTotalLength();
+                gsap.set(checkRef.current, {
+                    strokeDasharray: pathLength,
+                    strokeDashoffset: pathLength
+                });
+                tl.to(checkRef.current, {
+                    strokeDashoffset: 0,
+                    duration: 0.3,
+                    ease: "power3.out"
+                }, "-=0.1");
+            }
+            if (rippleRef.current) {
+                tl.fromTo(rippleRef.current, {
+                    scale: 0,
+                    opacity: 0.6
+                }, {
+                    scale: 2.5,
+                    opacity: 0,
+                    duration: 0.5,
+                    ease: "power2.out"
+                }, "-=0.3");
+            }
+        } else if (indeterminate) {
+            tl.to(containerRef.current, {
+                borderColor: "transparent",
+                duration: 0.15,
+                ease: "power2.out"
+            });
+            if (indeterminateRef.current) {
+                tl.fromTo(indeterminateRef.current, {
+                    scaleX: 0,
+                    opacity: 0
+                }, {
+                    scaleX: 1,
+                    opacity: 1,
+                    duration: 0.25,
+                    ease: "back.out(2)"
+                }, "-=0.1");
+            }
+        } else {
+            if (checkRef.current) {
+                const pathLength = checkRef.current.getTotalLength();
+                tl.to(checkRef.current, {
+                    strokeDashoffset: pathLength,
+                    duration: 0.2,
+                    ease: "power2.in"
+                });
+            }
+            if (indeterminateRef.current) {
+                tl.to(indeterminateRef.current, {
+                    scaleX: 0,
+                    opacity: 0,
+                    duration: 0.15,
+                    ease: "power2.in"
+                }, "<");
+            }
+            tl.to(containerRef.current, {
+                borderColor: "",
+                duration: 0.15,
+                ease: "power2.out"
+            }, "-=0.1");
+        }
+    }, [
+        checked,
+        indeterminate
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: containerRef,
+        className: cn(theme.checkbox.base, theme.checkbox.size[size], theme.checkbox.border.base, theme.checkbox.rounded, theme.checkbox.shadow, theme.checkbox.transition, !checked && !indeterminate && theme.checkbox.border.color.light, !checked && !indeterminate && theme.checkbox.border.color.dark, !checked && !indeterminate && theme.checkbox.background.unchecked.light, !checked && !indeterminate && theme.checkbox.background.unchecked.dark, (checked || indeterminate) && theme.checkbox.background.checked[color], (checked || indeterminate) && "border-transparent", disabled && theme.checkbox.disabled.opacity, disabled && theme.checkbox.disabled.cursor),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                ref: rippleRef,
+                className: cn(theme.ripple.base, theme.ripple.color[color])
+            }),
+            /*#__PURE__*/ _jsx("svg", {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                className: cn(theme.checkIcon.base, theme.checkIcon.size[size], "opacity-0", checked && !indeterminate && "opacity-100"),
+                "aria-hidden": "true",
+                children: /*#__PURE__*/ _jsx("path", {
+                    ref: checkRef,
+                    d: "M4 12.5L9.5 18L20 6",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    className: cn(theme.checkIcon.stroke.width, theme.checkIcon.stroke.color),
+                    fill: "none"
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                ref: indeterminateRef,
+                className: cn(theme.indeterminateIcon.base, theme.indeterminateIcon.size[size].width, theme.indeterminateIcon.size[size].height, theme.indeterminateIcon.background, theme.indeterminateIcon.rounded, "opacity-0 scale-x-0", indeterminate && "opacity-100")
+            })
+        ]
+    });
+}

package/dist/fe/components/Checkbox/components/SwitchTrack.js

@@ -0,0 +1,178 @@
+"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 { checkboxTheme } from "../theme";
+import { cn } from "../utils/cn";
+gsap.registerPlugin(useGSAP);
+export function SwitchTrack({ checked, size, color, disabled = false }) {
+    const trackRef = useRef(null);
+    const thumbRef = useRef(null);
+    const checkIconRef = useRef(null);
+    const crossIconRef = useRef(null);
+    const glowRef = useRef(null);
+    const theme = checkboxTheme;
+    const getThumbPosition = (isChecked)=>{
+        const positions = {
+            sm: {
+                unchecked: 2,
+                checked: 18
+            },
+            md: {
+                unchecked: 2,
+                checked: 24
+            },
+            lg: {
+                unchecked: 2,
+                checked: 30
+            }
+        };
+        return positions[size][isChecked ? "checked" : "unchecked"];
+    };
+    useGSAP(()=>{
+        if (!thumbRef.current || !trackRef.current) return;
+        const tl = gsap.timeline();
+        if (checked) {
+            tl.to(thumbRef.current, {
+                x: getThumbPosition(true),
+                duration: 0.35,
+                ease: "elastic.out(1, 0.75)"
+            });
+            tl.to(thumbRef.current, {
+                scale: 1.1,
+                duration: 0.15,
+                ease: "power2.out"
+            }, "<");
+            tl.to(thumbRef.current, {
+                scale: 1,
+                duration: 0.2,
+                ease: "power2.inOut"
+            });
+            if (checkIconRef.current) {
+                tl.fromTo(checkIconRef.current, {
+                    scale: 0,
+                    rotate: -180,
+                    opacity: 0
+                }, {
+                    scale: 1,
+                    rotate: 0,
+                    opacity: 1,
+                    duration: 0.3,
+                    ease: "back.out(2)"
+                }, "-=0.4");
+            }
+            if (crossIconRef.current) {
+                tl.to(crossIconRef.current, {
+                    scale: 0,
+                    rotate: 90,
+                    opacity: 0,
+                    duration: 0.2,
+                    ease: "power2.in"
+                }, "<-0.2");
+            }
+            if (glowRef.current) {
+                tl.fromTo(glowRef.current, {
+                    opacity: 0,
+                    scale: 0.8
+                }, {
+                    opacity: 0.6,
+                    scale: 1,
+                    duration: 0.3,
+                    ease: "power2.out"
+                }, "-=0.3").to(glowRef.current, {
+                    opacity: 0,
+                    duration: 0.5,
+                    ease: "power2.inOut"
+                });
+            }
+        } else {
+            tl.to(thumbRef.current, {
+                x: getThumbPosition(false),
+                duration: 0.35,
+                ease: "elastic.out(1, 0.75)"
+            });
+            tl.to(thumbRef.current, {
+                scale: 0.9,
+                duration: 0.1,
+                ease: "power2.out"
+            }, "<");
+            tl.to(thumbRef.current, {
+                scale: 1,
+                duration: 0.15,
+                ease: "power2.inOut"
+            });
+            if (crossIconRef.current) {
+                tl.fromTo(crossIconRef.current, {
+                    scale: 0,
+                    rotate: -90,
+                    opacity: 0
+                }, {
+                    scale: 1,
+                    rotate: 0,
+                    opacity: 1,
+                    duration: 0.25,
+                    ease: "back.out(1.5)"
+                }, "-=0.35");
+            }
+            if (checkIconRef.current) {
+                tl.to(checkIconRef.current, {
+                    scale: 0,
+                    rotate: 180,
+                    opacity: 0,
+                    duration: 0.2,
+                    ease: "power2.in"
+                }, "<-0.15");
+            }
+        }
+    }, [
+        checked,
+        size
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: trackRef,
+        className: cn(theme.switch.track.base, theme.switch.track.size[size].width, theme.switch.track.size[size].height, theme.switch.track.rounded, theme.switch.track.shadow, theme.switch.track.transition, !checked && theme.switch.track.background.unchecked.light, !checked && theme.switch.track.background.unchecked.dark, checked && theme.switch.track.background.checked[color], disabled && theme.switch.track.disabled.opacity, disabled && theme.switch.track.disabled.cursor),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                ref: glowRef,
+                className: cn("absolute inset-0 rounded-full blur-md opacity-0", checked && theme.switch.track.background.checked[color])
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                ref: thumbRef,
+                className: cn(theme.switch.thumb.base, theme.switch.thumb.size[size], theme.switch.thumb.background.light, theme.switch.thumb.shadow, theme.switch.thumb.rounded, "transform-gpu"),
+                style: {
+                    x: getThumbPosition(checked)
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("svg", {
+                        ref: checkIconRef,
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        className: cn(theme.switch.icon.base, theme.switch.icon.size[size], "text-emerald-500", "opacity-0"),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ _jsx("path", {
+                            d: "M5 13l4 4L19 7",
+                            stroke: "currentColor",
+                            strokeWidth: "3",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("svg", {
+                        ref: crossIconRef,
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        className: cn(theme.switch.icon.base, theme.switch.icon.size[size], theme.switch.icon.color.unchecked.light, "opacity-100"),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ _jsx("path", {
+                            d: "M6 6l12 12M6 18L18 6",
+                            stroke: "currentColor",
+                            strokeWidth: "2.5",
+                            strokeLinecap: "round"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,4 @@
+export { Checkbox } from "./components/Checkbox";
+export { CheckboxIcon } from "./components/CheckboxIcon";
+export { SwitchTrack } from "./components/SwitchTrack";
+export { checkboxTheme, extendCheckboxTheme } from "./theme";