nucleus-core-ts 0.8.7 → 0.8.8

package/dist/fe/components/NucleusTextInput/components/PasswordStrengthIndicator.js

@@ -0,0 +1,104 @@
+"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";
+gsap.registerPlugin(useGSAP);
+function calculateStrength(password) {
+    let score = 0;
+    if (!password) {
+        return {
+            level: "weak",
+            score: 0,
+            label: "",
+            color: "bg-gray-200"
+        };
+    }
+    if (password.length >= 8) score += 1;
+    if (password.length >= 12) score += 1;
+    if (password.length >= 16) score += 1;
+    if (/[a-z]/.test(password)) score += 1;
+    if (/[A-Z]/.test(password)) score += 1;
+    if (/[0-9]/.test(password)) score += 1;
+    if (/[^a-zA-Z0-9]/.test(password)) score += 1;
+    if (/(.)\1{2,}/.test(password)) score -= 1;
+    if (/^[a-zA-Z]+$/.test(password)) score -= 1;
+    if (/^[0-9]+$/.test(password)) score -= 1;
+    score = Math.max(0, Math.min(score, 7));
+    if (score <= 2) {
+        return {
+            level: "weak",
+            score,
+            label: "Weak",
+            color: "bg-red-500"
+        };
+    }
+    if (score <= 4) {
+        return {
+            level: "fair",
+            score,
+            label: "Fair",
+            color: "bg-orange-500"
+        };
+    }
+    if (score <= 5) {
+        return {
+            level: "good",
+            score,
+            label: "Good",
+            color: "bg-yellow-500"
+        };
+    }
+    return {
+        level: "strong",
+        score,
+        label: "Strong",
+        color: "bg-green-500"
+    };
+}
+export function PasswordStrengthIndicator({ password, className }) {
+    const barRef = useRef(null);
+    const strength = calculateStrength(password);
+    const percentage = password ? Math.min(strength.score / 7 * 100, 100) : 0;
+    useGSAP(()=>{
+        if (!barRef.current) return;
+        gsap.to(barRef.current, {
+            width: `${percentage}%`,
+            duration: 0.3,
+            ease: "power2.out"
+        });
+    }, [
+        percentage
+    ]);
+    if (!password) return null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn("mt-2 mb-4", className),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center justify-between mb-1",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "text-xs text-gray-500 dark:text-gray-400",
+                        children: "Password strength"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: cn("text-xs font-medium", strength.level === "weak" && "text-red-500", strength.level === "fair" && "text-orange-500", strength.level === "good" && "text-yellow-600", strength.level === "strong" && "text-green-500"),
+                        children: strength.label
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "h-1.5 w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden",
+                children: /*#__PURE__*/ _jsx("div", {
+                    ref: barRef,
+                    className: cn("h-full rounded-full transition-colors duration-300", strength.color),
+                    style: {
+                        width: 0
+                    }
+                })
+            })
+        ]
+    });
+}
+export { calculateStrength };

package/dist/fe/components/NucleusTextInput/components/TypewriterText.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { TextPlugin } from "gsap/TextPlugin";
+import { useEffect, useRef } from "react";
+import { nucleusTextInputTheme } from "../theme";
+import { cn } from "../utils/cn";
+gsap.registerPlugin(useGSAP, TextPlugin);
+export function TypewriterText({ text, className, onComplete }) {
+    const textRef = useRef(null);
+    const previousText = useRef("");
+    const theme = nucleusTextInputTheme.errorText;
+    const animConfig = nucleusTextInputTheme.animation.typewriter;
+    useGSAP(()=>{
+        if (!textRef.current || !text) {
+            if (textRef.current) {
+                textRef.current.textContent = "";
+            }
+            previousText.current = "";
+            return;
+        }
+        if (text === previousText.current) return;
+        gsap.killTweensOf(textRef.current);
+        textRef.current.textContent = "";
+        const duration = text.length * animConfig.charDelay;
+        gsap.to(textRef.current, {
+            duration,
+            text: {
+                value: text,
+                delimiter: ""
+            },
+            ease: animConfig.ease,
+            onComplete: ()=>{
+                previousText.current = text;
+                onComplete?.();
+            }
+        });
+    }, [
+        text
+    ]);
+    useEffect(()=>{
+        return ()=>{
+            if (textRef.current) {
+                gsap.killTweensOf(textRef.current);
+            }
+        };
+    }, []);
+    if (!text) return null;
+    return /*#__PURE__*/ _jsx("span", {
+        ref: textRef,
+        className: cn(theme.base, theme.text, theme.color, className),
+        role: "alert",
+        "aria-live": "polite"
+    });
+}

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

@@ -0,0 +1,7 @@
+export { FloatingLabel } from "./components/FloatingLabel";
+export { NucleusTextInput } from "./components/NucleusTextInput";
+export { calculateStrength, PasswordStrengthIndicator } from "./components/PasswordStrengthIndicator";
+export { TypewriterText } from "./components/TypewriterText";
+export { extendNucleusTextInputTheme, nucleusTextInputTheme } from "./theme";
+export { formatNumberWithSeparator, formatPhoneNumber, parseFormattedNumber, unformatNumber, unformatPhone } from "./utils/format";
+export { defaultValidators, getAutoCompleteForType, getInputModeForType, validateWithConfig } from "./utils/validation";

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

@@ -0,0 +1,121 @@
+export const nucleusTextInputTheme = {
+    container: {
+        base: "relative w-full",
+        spacing: "mb-1"
+    },
+    wrapper: {
+        base: "relative flex items-center",
+        border: {
+            base: "border rounded-lg",
+            width: "border",
+            radius: "rounded-lg"
+        },
+        padding: "px-4 py-3",
+        transition: "transition-all duration-200 ease-out",
+        states: {
+            inactive: "border-gray-300 dark:border-gray-600",
+            hover: "border-gray-400 dark:border-gray-500",
+            focused: "border-blue-600 dark:border-blue-500",
+            error: "border-red-500 dark:border-red-400",
+            disabled: "border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50"
+        }
+    },
+    input: {
+        base: "w-full bg-transparent outline-none",
+        text: "text-base",
+        color: "text-gray-900 dark:text-gray-100",
+        placeholder: "placeholder:text-gray-400 dark:placeholder:text-gray-500",
+        disabled: "text-gray-400 dark:text-gray-500 cursor-not-allowed",
+        transition: "transition-colors duration-200"
+    },
+    label: {
+        base: "absolute pointer-events-none select-none",
+        text: "text-base",
+        transition: "transition-all duration-200 ease-out",
+        states: {
+            inactive: {
+                position: "left-3 top-1/2 -translate-y-1/2",
+                text: "text-base",
+                color: "text-gray-500 dark:text-gray-400",
+                background: "bg-transparent px-1"
+            },
+            floated: {
+                position: "left-3 -top-2.5 translate-y-0",
+                text: "text-xs",
+                color: "text-gray-600 dark:text-gray-300",
+                background: "bg-white/50 dark:bg-gray-900/50 px-1"
+            },
+            focused: {
+                color: "text-blue-600 dark:text-blue-500"
+            },
+            error: {
+                color: "text-red-500 dark:text-red-400"
+            },
+            disabled: {
+                color: "text-gray-400 dark:text-gray-500"
+            }
+        }
+    },
+    helperText: {
+        base: "mt-1.5 ml-1",
+        text: "text-xs",
+        color: "text-gray-500 dark:text-gray-400",
+        disabled: "text-gray-400 dark:text-gray-500"
+    },
+    errorText: {
+        base: "mt-1.5 ml-1",
+        text: "text-xs",
+        color: "text-red-500 dark:text-red-400",
+        minHeight: "min-h-[1.25rem]"
+    },
+    icon: {
+        base: "flex-shrink-0",
+        size: "w-5 h-5",
+        color: "text-gray-400 dark:text-gray-500",
+        spacing: {
+            left: "mr-2",
+            right: "ml-2"
+        },
+        states: {
+            focused: "text-blue-600 dark:text-blue-500",
+            error: "text-red-500 dark:text-red-400",
+            disabled: "text-gray-300 dark:text-gray-600"
+        }
+    },
+    animation: {
+        label: {
+            duration: 0.35,
+            ease: "power3.out",
+            floatY: -24,
+            floatScale: 0.75
+        },
+        typewriter: {
+            charDelay: 0.03,
+            ease: "none"
+        },
+        border: {
+            duration: 0.2,
+            ease: "power2.out"
+        }
+    }
+};
+export function extendNucleusTextInputTheme(overrides) {
+    return deepMerge(nucleusTextInputTheme, overrides);
+}
+function deepMerge(target, source) {
+    const output = {
+        ...target
+    };
+    for(const key in source){
+        if (Object.hasOwn(source, key)) {
+            const sourceValue = source[key];
+            const targetValue = target[key];
+            if (sourceValue !== undefined && typeof sourceValue === "object" && sourceValue !== null && !Array.isArray(sourceValue) && typeof targetValue === "object" && targetValue !== null && !Array.isArray(targetValue)) {
+                output[key] = deepMerge(targetValue, sourceValue);
+            } else if (sourceValue !== undefined) {
+                output[key] = sourceValue;
+            }
+        }
+    }
+    return output;
+}

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

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

package/dist/fe/components/NucleusTextInput/utils/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/fe/components/NucleusTextInput/utils/format.js

@@ -0,0 +1,62 @@
+export function formatNumberWithSeparator(value, separator = " ") {
+    const digitsOnly = value.replace(/\D/g, "");
+    if (!digitsOnly) return "";
+    return digitsOnly.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+}
+export function unformatNumber(value) {
+    return value.replace(/\D/g, "");
+}
+export function parseFormattedNumber(value) {
+    const digitsOnly = value.replace(/\D/g, "");
+    return digitsOnly ? Number.parseInt(digitsOnly, 10) : 0;
+}
+const PHONE_FORMATS = {
+    tr: {
+        pattern: [
+            3,
+            3,
+            2,
+            2
+        ],
+        prefix: ""
+    },
+    us: {
+        pattern: [
+            3,
+            3,
+            4
+        ],
+        prefix: ""
+    },
+    eu: {
+        pattern: [
+            2,
+            3,
+            3,
+            2
+        ],
+        prefix: ""
+    }
+};
+export function formatPhoneNumber(value, format = "tr") {
+    const digitsOnly = value.replace(/\D/g, "");
+    if (!digitsOnly) return "";
+    const { pattern } = PHONE_FORMATS[format];
+    const parts = [];
+    let remaining = digitsOnly;
+    for (const groupSize of pattern){
+        if (remaining.length === 0) break;
+        parts.push(remaining.slice(0, groupSize));
+        remaining = remaining.slice(groupSize);
+    }
+    if (remaining.length > 0) {
+        parts.push(remaining);
+    }
+    return parts.join(" ");
+}
+export function unformatPhone(value) {
+    return value.replace(/\D/g, "");
+}
+export function getPhoneFormatPattern(format) {
+    return PHONE_FORMATS[format].pattern;
+}

package/dist/fe/components/NucleusTextInput/utils/validation.js

@@ -0,0 +1,191 @@
+const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+const URL_REGEX = /^(https?:\/\/)?([\da-z-]+\.)+[a-z]{2,6}(\/[^\s]*)?$/i;
+const PHONE_REGEX = /^[+]?[(]?[0-9]{1,4}[)]?[-\s./0-9]{6,}$/;
+const PASSWORD_RULES = {
+    minLength: 8,
+    hasUppercase: /[A-Z]/,
+    hasLowercase: /[a-z]/,
+    hasNumber: /[0-9]/,
+    hasSpecial: /[!@#$%^&*(),.?":{}|<>]/
+};
+export const defaultValidators = {
+    text: (value)=>{
+        if (!value.trim()) {
+            return {
+                isValid: true
+            };
+        }
+        return {
+            isValid: true
+        };
+    },
+    email: (value)=>{
+        if (!value.trim()) {
+            return {
+                isValid: true
+            };
+        }
+        if (!EMAIL_REGEX.test(value)) {
+            return {
+                isValid: false,
+                errorMessage: "Please enter a valid email address"
+            };
+        }
+        return {
+            isValid: true
+        };
+    },
+    password: (value)=>{
+        if (!value) {
+            return {
+                isValid: true
+            };
+        }
+        const errors = [];
+        if (value.length < PASSWORD_RULES.minLength) {
+            errors.push(`at least ${PASSWORD_RULES.minLength} characters`);
+        }
+        if (!PASSWORD_RULES.hasUppercase.test(value)) {
+            errors.push("one uppercase letter");
+        }
+        if (!PASSWORD_RULES.hasLowercase.test(value)) {
+            errors.push("one lowercase letter");
+        }
+        if (!PASSWORD_RULES.hasNumber.test(value)) {
+            errors.push("one number");
+        }
+        if (!PASSWORD_RULES.hasSpecial.test(value)) {
+            errors.push("one special character");
+        }
+        if (errors.length > 0) {
+            return {
+                isValid: false,
+                errorMessage: `Password must contain ${errors.join(", ")}`
+            };
+        }
+        return {
+            isValid: true
+        };
+    },
+    number: (value)=>{
+        if (!value.trim()) {
+            return {
+                isValid: true
+            };
+        }
+        const num = Number(value);
+        if (Number.isNaN(num)) {
+            return {
+                isValid: false,
+                errorMessage: "Please enter a valid number"
+            };
+        }
+        return {
+            isValid: true
+        };
+    },
+    tel: (value)=>{
+        if (!value.trim()) {
+            return {
+                isValid: true
+            };
+        }
+        const digitsOnly = value.replace(/\D/g, "");
+        if (digitsOnly.length < 7) {
+            return {
+                isValid: false,
+                errorMessage: "Phone number must have at least 7 digits"
+            };
+        }
+        if (!PHONE_REGEX.test(value)) {
+            return {
+                isValid: false,
+                errorMessage: "Please enter a valid phone number"
+            };
+        }
+        return {
+            isValid: true
+        };
+    },
+    url: (value)=>{
+        if (!value.trim()) {
+            return {
+                isValid: true
+            };
+        }
+        if (!URL_REGEX.test(value)) {
+            return {
+                isValid: false,
+                errorMessage: "Please enter a valid URL"
+            };
+        }
+        return {
+            isValid: true
+        };
+    }
+};
+export function validateWithConfig(value, inputType, config) {
+    if (config?.required && !value.trim()) {
+        return {
+            isValid: false,
+            errorMessage: config.requiredMessage || "This field is required"
+        };
+    }
+    if (config?.minLength && value.length < config.minLength) {
+        return {
+            isValid: false,
+            errorMessage: `Minimum ${config.minLength} characters required`
+        };
+    }
+    if (config?.maxLength && value.length > config.maxLength) {
+        return {
+            isValid: false,
+            errorMessage: `Maximum ${config.maxLength} characters allowed`
+        };
+    }
+    if (config?.pattern && !config.pattern.test(value)) {
+        return {
+            isValid: false,
+            errorMessage: config.patternMessage || "Invalid format"
+        };
+    }
+    if (config?.customRules) {
+        for (const rule of config.customRules){
+            if (!rule.validate(value)) {
+                return {
+                    isValid: false,
+                    errorMessage: rule.message
+                };
+            }
+        }
+    }
+    return defaultValidators[inputType](value);
+}
+export function getInputModeForType(inputType) {
+    switch(inputType){
+        case "email":
+            return "email";
+        case "number":
+            return "numeric";
+        case "tel":
+            return "tel";
+        case "url":
+            return "url";
+        default:
+            return "text";
+    }
+}
+export function getAutoCompleteForType(inputType, isNewPassword) {
+    switch(inputType){
+        case "email":
+            return "email";
+        case "password":
+            return isNewPassword ? "new-password" : "current-password";
+        case "tel":
+            return "tel";
+        case "url":
+            return "url";
+        default:
+            return "off";
+    }
+}