nucleus-core-ts 0.8.6 → 0.8.8

package/dist/fe/components/NucleusTextInput/components/FloatingLabel.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 { useRef } from "react";
+import { nucleusTextInputTheme } from "../theme";
+import { cn } from "../utils/cn";
+gsap.registerPlugin(useGSAP);
+export function FloatingLabel({ label, isFloated, isFocused, hasError, isDisabled, hasLeftIcon, className }) {
+    const labelRef = useRef(null);
+    const theme = nucleusTextInputTheme.label;
+    const animConfig = nucleusTextInputTheme.animation.label;
+    useGSAP(()=>{
+        if (!labelRef.current) return;
+        if (isFloated) {
+            gsap.to(labelRef.current, {
+                y: animConfig.floatY,
+                x: hasLeftIcon ? -20 : 0,
+                scale: animConfig.floatScale,
+                duration: animConfig.duration,
+                ease: animConfig.ease
+            });
+        } else {
+            gsap.to(labelRef.current, {
+                y: 0,
+                x: 0,
+                scale: 1,
+                duration: animConfig.duration,
+                ease: animConfig.ease
+            });
+        }
+    }, [
+        isFloated,
+        hasLeftIcon
+    ]);
+    const getColorClass = ()=>{
+        if (isDisabled) return theme.states.disabled.color;
+        if (hasError) return theme.states.error.color;
+        if (isFocused) return theme.states.focused.color;
+        if (isFloated) return theme.states.floated.color;
+        return theme.states.inactive.color;
+    };
+    const getBackgroundClass = ()=>{
+        if (isFloated) return theme.states.floated.background;
+        return theme.states.inactive.background;
+    };
+    return /*#__PURE__*/ _jsx("span", {
+        ref: labelRef,
+        className: cn(theme.base, getBackgroundClass(), hasLeftIcon ? "left-9 top-1/2 origin-left" : "left-3 top-1/2 origin-left", getColorClass(), className),
+        style: {
+            transform: "translateY(-50%)"
+        },
+        "aria-hidden": "true",
+        children: label
+    });
+}

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

@@ -0,0 +1,258 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+export function MailIcon({ className }) {
+    return /*#__PURE__*/ _jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: cn("h-5 w-5", className),
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ _jsx("rect", {
+                width: "20",
+                height: "16",
+                x: "2",
+                y: "4",
+                rx: "2"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"
+            })
+        ]
+    });
+}
+export function LockIcon({ className }) {
+    return /*#__PURE__*/ _jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: cn("h-5 w-5", className),
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ _jsx("rect", {
+                width: "18",
+                height: "11",
+                x: "3",
+                y: "11",
+                rx: "2",
+                ry: "2"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M7 11V7a5 5 0 0 1 10 0v4"
+            })
+        ]
+    });
+}
+export function EyeIcon({ className }) {
+    return /*#__PURE__*/ _jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: cn("h-5 w-5", className),
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+            }),
+            /*#__PURE__*/ _jsx("circle", {
+                cx: "12",
+                cy: "12",
+                r: "3"
+            })
+        ]
+    });
+}
+export function EyeOffIcon({ className }) {
+    return /*#__PURE__*/ _jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: cn("h-5 w-5", className),
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M14.084 14.158a3 3 0 0 1-4.242-4.242"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "m2 2 20 20"
+            })
+        ]
+    });
+}
+export function HashIcon({ className }) {
+    return /*#__PURE__*/ _jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: cn("h-5 w-5", className),
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ _jsx("line", {
+                x1: "4",
+                x2: "20",
+                y1: "9",
+                y2: "9"
+            }),
+            /*#__PURE__*/ _jsx("line", {
+                x1: "4",
+                x2: "20",
+                y1: "15",
+                y2: "15"
+            }),
+            /*#__PURE__*/ _jsx("line", {
+                x1: "10",
+                x2: "8",
+                y1: "3",
+                y2: "21"
+            }),
+            /*#__PURE__*/ _jsx("line", {
+                x1: "16",
+                x2: "14",
+                y1: "3",
+                y2: "21"
+            })
+        ]
+    });
+}
+export function PhoneIcon({ className }) {
+    return /*#__PURE__*/ _jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: cn("h-5 w-5", className),
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
+        })
+    });
+}
+export function LinkIcon({ className }) {
+    return /*#__PURE__*/ _jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: cn("h-5 w-5", className),
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+            })
+        ]
+    });
+}
+export function TextIcon({ className }) {
+    return /*#__PURE__*/ _jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: cn("h-5 w-5", className),
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ _jsx("polyline", {
+                points: "4 7 4 4 20 4 20 7"
+            }),
+            /*#__PURE__*/ _jsx("line", {
+                x1: "9",
+                x2: "15",
+                y1: "20",
+                y2: "20"
+            }),
+            /*#__PURE__*/ _jsx("line", {
+                x1: "12",
+                x2: "12",
+                y1: "4",
+                y2: "20"
+            })
+        ]
+    });
+}
+export function CheckIcon({ className }) {
+    return /*#__PURE__*/ _jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: cn("h-5 w-5", className),
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M20 6 9 17l-5-5"
+        })
+    });
+}
+export function AlertCircleIcon({ className }) {
+    return /*#__PURE__*/ _jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: cn("h-5 w-5", className),
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ _jsx("circle", {
+                cx: "12",
+                cy: "12",
+                r: "10"
+            }),
+            /*#__PURE__*/ _jsx("line", {
+                x1: "12",
+                x2: "12",
+                y1: "8",
+                y2: "12"
+            }),
+            /*#__PURE__*/ _jsx("line", {
+                x1: "12",
+                x2: "12.01",
+                y1: "16",
+                y2: "16"
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,321 @@
+"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, useState } from "react";
+import { nucleusTextInputTheme } from "../theme";
+import { cn } from "../utils/cn";
+import { formatNumberWithSeparator, formatPhoneNumber, unformatNumber, unformatPhone } from "../utils/format";
+import { getAutoCompleteForType, getInputModeForType, validateWithConfig } from "../utils/validation";
+import { FloatingLabel } from "./FloatingLabel";
+import { AlertCircleIcon, CheckIcon, EyeIcon, EyeOffIcon, HashIcon, LinkIcon, LockIcon, MailIcon, PhoneIcon } from "./InputIcons";
+import { PasswordStrengthIndicator } from "./PasswordStrengthIndicator";
+import { TypewriterText } from "./TypewriterText";
+gsap.registerPlugin(useGSAP);
+const TYPE_ICONS = {
+    text: null,
+    email: /*#__PURE__*/ _jsx(MailIcon, {}),
+    password: /*#__PURE__*/ _jsx(LockIcon, {}),
+    number: /*#__PURE__*/ _jsx(HashIcon, {}),
+    tel: /*#__PURE__*/ _jsx(PhoneIcon, {}),
+    url: /*#__PURE__*/ _jsx(LinkIcon, {})
+};
+export function NucleusTextInput({ value = "", onChange, type = "text", label, placeholder, helperText, errorMessage, disabled = false, readOnly = false, leftIcon, rightIcon, size = "md", fullWidth = true, className, inputClassName, labelClassName, wrapperClassName, showTypewriterError = true, showTypeIcon = true, showValidationIcon = true, enableValidation = true, validateOnBlur = true, validateOnChange = false, validationConfig, customValidator, onValidationChange, unit, unitPosition = "suffix", formatNumber = false, thousandSeparator = " ", phoneFormat = "tr", isNewPassword = false, maxInputLength, confirmValue, onConfirmChange, showPasswordStrength = false, preventCopy = false, preventPaste = false, preventContextMenu = false, trimOnBlur = false, onFocus, onBlur, ...restProps }) {
+    const [isFocused, setIsFocused] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const [internalError, setInternalError] = useState(undefined);
+    const [isValid, setIsValid] = useState(null);
+    const inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const inputId = useId();
+    const theme = nucleusTextInputTheme;
+    const displayError = errorMessage || internalError;
+    const hasError = Boolean(displayError);
+    const hasValue = Boolean(value && value.length > 0);
+    const isFloated = isFocused || hasValue;
+    const { contextSafe } = useGSAP({
+        scope: wrapperRef
+    });
+    const runValidation = (val)=>{
+        if (!enableValidation) return {
+            isValid: true
+        };
+        if (customValidator) {
+            return customValidator(val);
+        }
+        return validateWithConfig(val, type, validationConfig);
+    };
+    const handleValidation = (val)=>{
+        const result = runValidation(val);
+        setIsValid(result.isValid);
+        setInternalError(result.isValid ? undefined : result.errorMessage);
+        onValidationChange?.(result);
+    };
+    const handleFocus = contextSafe((e)=>{
+        if (disabled) return;
+        setIsFocused(true);
+        onFocus?.(e);
+    });
+    const handleBlur = contextSafe((e)=>{
+        setIsFocused(false);
+        if (trimOnBlur && value) {
+            const trimmed = value.trim();
+            if (trimmed !== value) {
+                onChange?.(trimmed);
+            }
+        }
+        if (validateOnBlur && value) {
+            handleValidation(getUnformattedValue(value));
+        }
+        if (type === "password" && confirmValue !== undefined && value !== confirmValue) {
+            setInternalError("Passwords do not match");
+            setIsValid(false);
+        }
+        onBlur?.(e);
+    });
+    const handleCopy = (e)=>{
+        if (preventCopy || type === "password") {
+            e.preventDefault();
+        }
+    };
+    const handlePaste = (e)=>{
+        if (preventPaste) {
+            e.preventDefault();
+        }
+    };
+    const handleContextMenu = (e)=>{
+        if (preventContextMenu || type === "password") {
+            e.preventDefault();
+        }
+    };
+    const handleChange = (e)=>{
+        const input = e.target;
+        const cursorPos = input.selectionStart ?? 0;
+        const oldValue = value;
+        let newValue = e.target.value;
+        const oldRawLength = unformatNumber(oldValue).length;
+        const newRawLength = unformatNumber(newValue).length;
+        const isDeleting = newRawLength < oldRawLength;
+        if (type === "number" && formatNumber) {
+            const rawValue = unformatNumber(newValue);
+            newValue = formatNumberWithSeparator(rawValue, thousandSeparator);
+        } else if (type === "tel") {
+            newValue = formatPhoneNumber(newValue, phoneFormat);
+        }
+        onChange?.(newValue);
+        if (type === "number" && formatNumber || type === "tel") {
+            requestAnimationFrame(()=>{
+                if (!inputRef.current) return;
+                const rawBeforeCursor = unformatNumber(e.target.value.slice(0, cursorPos)).length;
+                let newCursorPos = 0;
+                let rawCount = 0;
+                for(let i = 0; i < newValue.length; i++){
+                    const char = newValue[i];
+                    if (char !== undefined && /\d/.test(char)) {
+                        rawCount++;
+                    }
+                    if (rawCount === rawBeforeCursor) {
+                        newCursorPos = i + 1;
+                        break;
+                    }
+                }
+                if (rawCount < rawBeforeCursor) {
+                    newCursorPos = newValue.length;
+                }
+                if (isDeleting && cursorPos > 0) {
+                    const charBeforeCursor = e.target.value[cursorPos - 1];
+                    if (charBeforeCursor === " " || charBeforeCursor === thousandSeparator) {
+                        newCursorPos = Math.max(0, newCursorPos - 1);
+                    }
+                }
+                inputRef.current.setSelectionRange(newCursorPos, newCursorPos);
+            });
+        }
+        if (validateOnChange) {
+            const validationValue = getUnformattedValue(newValue);
+            handleValidation(validationValue);
+        }
+        if (type === "password" && confirmValue !== undefined && newValue !== confirmValue) {
+            setInternalError("Passwords do not match");
+            setIsValid(false);
+        } else if (type === "password" && confirmValue !== undefined && newValue === confirmValue) {
+            setInternalError(undefined);
+            setIsValid(true);
+        } else if (internalError && !validateOnChange) {
+            setInternalError(undefined);
+            setIsValid(null);
+        }
+    };
+    const getUnformattedValue = (val)=>{
+        if (type === "number" && formatNumber) return unformatNumber(val);
+        if (type === "tel") return unformatPhone(val);
+        return val;
+    };
+    const getDisplayValue = ()=>{
+        if (type === "number" && formatNumber && value) {
+            return formatNumberWithSeparator(unformatNumber(value), thousandSeparator);
+        }
+        if (type === "tel" && value) {
+            return formatPhoneNumber(value, phoneFormat);
+        }
+        return value;
+    };
+    const togglePasswordVisibility = ()=>{
+        setShowPassword((prev)=>!prev);
+    };
+    const getInputType = ()=>{
+        if (type === "password") {
+            return showPassword ? "text" : "password";
+        }
+        return type;
+    };
+    const getTypeIcon = ()=>{
+        if (!showTypeIcon) return null;
+        if (leftIcon) return null;
+        if (type === "number" && unit) return null;
+        return TYPE_ICONS[type];
+    };
+    const getValidationIcon = ()=>{
+        if (!showValidationIcon || !hasValue || isValid === null) return null;
+        if (hasError) return /*#__PURE__*/ _jsx(AlertCircleIcon, {
+            className: "text-red-500"
+        });
+        if (isValid) return /*#__PURE__*/ _jsx(CheckIcon, {
+            className: "text-green-500"
+        });
+        return null;
+    };
+    const getRightIcon = ()=>{
+        if (type === "password") {
+            return /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: togglePasswordVisibility,
+                className: "focus:outline-none",
+                tabIndex: -1,
+                "aria-label": showPassword ? "Hide password" : "Show password",
+                children: showPassword ? /*#__PURE__*/ _jsx(EyeOffIcon, {}) : /*#__PURE__*/ _jsx(EyeIcon, {})
+            });
+        }
+        if (rightIcon) return rightIcon;
+        return getValidationIcon();
+    };
+    const handleMouseEnter = contextSafe(()=>{
+        if (disabled) return;
+        setIsHovered(true);
+        if (wrapperRef.current && !isFocused && !hasError) {
+            gsap.to(wrapperRef.current, {
+                borderColor: "rgb(156, 163, 175)",
+                duration: theme.animation.border.duration,
+                ease: theme.animation.border.ease
+            });
+        }
+    });
+    const handleMouseLeave = contextSafe(()=>{
+        setIsHovered(false);
+        if (wrapperRef.current && !isFocused && !hasError) {
+            gsap.to(wrapperRef.current, {
+                borderColor: "rgb(209, 213, 219)",
+                duration: theme.animation.border.duration,
+                ease: theme.animation.border.ease
+            });
+        }
+    });
+    const getBorderStateClass = ()=>{
+        if (disabled) return theme.wrapper.states.disabled;
+        if (hasError) return theme.wrapper.states.error;
+        if (isFocused) return theme.wrapper.states.focused;
+        if (isHovered) return theme.wrapper.states.hover;
+        return theme.wrapper.states.inactive;
+    };
+    const getSizeClasses = ()=>{
+        switch(size){
+            case "sm":
+                return "px-3 py-2 text-sm";
+            case "lg":
+                return "px-5 py-4 text-lg";
+            default:
+                return theme.wrapper.padding;
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn(theme.container.base, theme.container.spacing, fullWidth && "w-full", className),
+        children: [
+            /*#__PURE__*/ _jsxs("label", {
+                ref: wrapperRef,
+                htmlFor: inputId,
+                className: cn(theme.wrapper.base, theme.wrapper.border.base, theme.wrapper.transition, getSizeClasses(), getBorderStateClass(), "cursor-text", wrapperClassName),
+                onMouseEnter: handleMouseEnter,
+                onMouseLeave: handleMouseLeave,
+                children: [
+                    (leftIcon || getTypeIcon()) && /*#__PURE__*/ _jsx("span", {
+                        className: cn(theme.icon.base, theme.icon.size, theme.icon.color, theme.icon.spacing.left, isFocused && theme.icon.states.focused, hasError && theme.icon.states.error, disabled && theme.icon.states.disabled),
+                        children: leftIcon || getTypeIcon()
+                    }),
+                    label && /*#__PURE__*/ _jsx(FloatingLabel, {
+                        label: label,
+                        isFloated: isFloated,
+                        isFocused: isFocused,
+                        hasError: hasError,
+                        isDisabled: disabled,
+                        hasLeftIcon: Boolean(leftIcon || getTypeIcon()),
+                        className: labelClassName
+                    }),
+                    unit && unitPosition === "prefix" && /*#__PURE__*/ _jsx("span", {
+                        className: "text-gray-500 dark:text-gray-400 mr-1 select-none",
+                        children: unit
+                    }),
+                    /*#__PURE__*/ _jsx("input", {
+                        ref: inputRef,
+                        id: inputId,
+                        type: type === "number" && formatNumber ? "text" : getInputType(),
+                        inputMode: getInputModeForType(type),
+                        autoComplete: getAutoCompleteForType(type, isNewPassword),
+                        maxLength: maxInputLength,
+                        value: getDisplayValue(),
+                        onChange: handleChange,
+                        onFocus: handleFocus,
+                        onBlur: handleBlur,
+                        onCopy: handleCopy,
+                        onPaste: handlePaste,
+                        onContextMenu: handleContextMenu,
+                        disabled: disabled,
+                        readOnly: readOnly,
+                        placeholder: isFloated ? placeholder : "",
+                        "aria-label": label,
+                        "aria-invalid": hasError,
+                        "aria-describedby": displayError ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined,
+                        className: cn(theme.input.base, theme.input.text, theme.input.color, theme.input.placeholder, theme.input.transition, disabled && theme.input.disabled, inputClassName),
+                        ...restProps
+                    }),
+                    unit && unitPosition === "suffix" && /*#__PURE__*/ _jsx("span", {
+                        className: "text-gray-500 dark:text-gray-400 ml-1 select-none",
+                        children: unit
+                    }),
+                    getRightIcon() && /*#__PURE__*/ _jsx("span", {
+                        className: cn(theme.icon.base, theme.icon.size, theme.icon.color, theme.icon.spacing.right, isFocused && theme.icon.states.focused, hasError && theme.icon.states.error, disabled && theme.icon.states.disabled),
+                        children: getRightIcon()
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.errorText.minHeight,
+                children: hasError && showTypewriterError && displayError ? /*#__PURE__*/ _jsx(TypewriterText, {
+                    text: displayError
+                }) : hasError ? /*#__PURE__*/ _jsx("span", {
+                    id: `${inputId}-error`,
+                    className: cn(theme.errorText.base, theme.errorText.text, theme.errorText.color),
+                    role: "alert",
+                    children: displayError
+                }) : helperText ? /*#__PURE__*/ _jsx("span", {
+                    id: `${inputId}-helper`,
+                    className: cn(theme.helperText.base, theme.helperText.text, theme.helperText.color, disabled && theme.helperText.disabled),
+                    children: helperText
+                }) : null
+            }),
+            type === "password" && showPasswordStrength && value && /*#__PURE__*/ _jsx(PasswordStrengthIndicator, {
+                password: value
+            })
+        ]
+    });
+}