@seedgrid/fe-components 0.2.4

package/dist/inputs/SgInputPassword.js

@@ -0,0 +1,278 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { SgInputText } from "./SgInputText";
+import { buildCommonPasswordSet } from "../commons/common-passwords";
+import { t, useComponentsI18n } from "../i18n";
+export function SgInputPassword(props) {
+    const i18n = useComponentsI18n();
+    const { inputProps, onValidation, required, requiredMessage, validateOnBlur, error, onClear, hidePassword, maxLength, validation, createNewPasswordButton = false, showStrengthBar = true, commonPasswordCheck = true, commonPasswordMessage, commonPasswordList, onChange, upperRequired = true, lowerRequired = true, numberRequired = true, specialCharacterRequired = true, prohibitsRepeatedCharactersInSequence = true, prohibitsSequentialAscCharacters = true, prohibitsSequentialDescCharacters = true, minSize = 8, ...rest } = props;
+    const resolvedCommonPasswordMessage = commonPasswordMessage ?? t(i18n, "components.password.common");
+    const [internalError, setInternalError] = React.useState(null);
+    const [isHidden, setIsHidden] = React.useState(hidePassword ?? true);
+    const [hasInteracted, setHasInteracted] = React.useState(false);
+    const [unmetRequirements, setUnmetRequirements] = React.useState([]);
+    const inputRef = React.useRef(null);
+    const commonPasswordSet = React.useMemo(() => {
+        if (!commonPasswordCheck)
+            return null;
+        return buildCommonPasswordSet(commonPasswordList);
+    }, [commonPasswordCheck, commonPasswordList]);
+    const isCommonPassword = React.useCallback((value) => {
+        if (!commonPasswordSet)
+            return false;
+        const normalized = value.trim().toLowerCase();
+        if (!normalized)
+            return false;
+        if (commonPasswordSet.has(normalized))
+            return true;
+        const simplified = normalized.replace(/[^a-z0-9]/g, "");
+        if (!simplified)
+            return false;
+        return commonPasswordSet.has(simplified);
+    }, [commonPasswordSet]);
+    const getUnmetRequirements = React.useCallback((value) => {
+        const unmet = [];
+        if (value.length < minSize) {
+            unmet.push(t(i18n, "components.password.minSize", { min: minSize }));
+        }
+        if (upperRequired && !/[A-Z]/.test(value)) {
+            unmet.push(t(i18n, "components.password.upper"));
+        }
+        if (lowerRequired && !/[a-z]/.test(value)) {
+            unmet.push(t(i18n, "components.password.lower"));
+        }
+        if (numberRequired && !/[0-9]/.test(value)) {
+            unmet.push(t(i18n, "components.password.number"));
+        }
+        if (specialCharacterRequired && !/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(value)) {
+            unmet.push(t(i18n, "components.password.special"));
+        }
+        if (prohibitsRepeatedCharactersInSequence && /(.)\1/.test(value)) {
+            unmet.push(t(i18n, "components.password.noRepeat"));
+        }
+        if (prohibitsSequentialAscCharacters && hasSequentialCharacters(value, 3, "asc")) {
+            unmet.push(t(i18n, "components.password.noSeqAsc"));
+        }
+        if (prohibitsSequentialDescCharacters && hasSequentialCharacters(value, 3, "desc")) {
+            unmet.push(t(i18n, "components.password.noSeqDesc"));
+        }
+        return unmet;
+    }, [
+        i18n,
+        lowerRequired,
+        minSize,
+        numberRequired,
+        prohibitsRepeatedCharactersInSequence,
+        prohibitsSequentialAscCharacters,
+        prohibitsSequentialDescCharacters,
+        specialCharacterRequired,
+        upperRequired
+    ]);
+    const strengthScore = React.useMemo(() => {
+        const totalChecks = [
+            minSize,
+            upperRequired,
+            lowerRequired,
+            numberRequired,
+            specialCharacterRequired,
+            prohibitsRepeatedCharactersInSequence,
+            prohibitsSequentialAscCharacters,
+            prohibitsSequentialDescCharacters
+        ];
+        const activeChecks = totalChecks.filter((v) => v !== false).length;
+        if (activeChecks === 0)
+            return 0;
+        return activeChecks - unmetRequirements.length;
+    }, [
+        lowerRequired,
+        minSize,
+        numberRequired,
+        prohibitsRepeatedCharactersInSequence,
+        specialCharacterRequired,
+        upperRequired,
+        unmetRequirements.length
+    ]);
+    const getStrengthColor = (score) => {
+        if (score === 0)
+            return "bg-border";
+        if (score <= 1)
+            return "bg-destructive";
+        if (score <= 2)
+            return "bg-orange-500";
+        if (score <= 3)
+            return "bg-amber-500";
+        if (score === 4)
+            return "bg-yellow-400";
+        return "bg-green-500";
+    };
+    const generatePassword = React.useCallback(() => {
+        const upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+        const lower = "abcdefghijklmnopqrstuvwxyz";
+        const numbers = "0123456789";
+        const specials = "!@#$%^&*()_+-=[]{};':\"\\|,.<>/?";
+        const requiredGroups = [];
+        if (upperRequired)
+            requiredGroups.push(upper);
+        if (lowerRequired)
+            requiredGroups.push(lower);
+        if (numberRequired)
+            requiredGroups.push(numbers);
+        if (specialCharacterRequired)
+            requiredGroups.push(specials);
+        const pool = (upperRequired ? upper : "") +
+            (lowerRequired ? lower : "") +
+            (numberRequired ? numbers : "") +
+            (specialCharacterRequired ? specials : "") ||
+            upper + lower + numbers;
+        const targetLength = Math.max(minSize, maxLength ?? minSize);
+        const randomInt = (max) => {
+            const array = new Uint32Array(1);
+            crypto.getRandomValues(array);
+            return (array[0] ?? 0) % max;
+        };
+        const pick = (set) => set[randomInt(set.length)] ?? "";
+        const shuffle = (arr) => {
+            for (let i = arr.length - 1; i > 0; i -= 1) {
+                const j = randomInt(i + 1);
+                const left = arr[i] ?? "";
+                const right = arr[j] ?? "";
+                arr[i] = right;
+                arr[j] = left;
+            }
+            return arr;
+        };
+        let candidate = "";
+        let attempts = 0;
+        while (attempts < 50) {
+            attempts += 1;
+            const chars = [];
+            requiredGroups.forEach((group) => {
+                chars.push(pick(group));
+            });
+            while (chars.length < targetLength) {
+                chars.push(pick(pool));
+            }
+            candidate = shuffle(chars).join("");
+            const unmet = getUnmetRequirements(candidate);
+            if (unmet.length === 0)
+                break;
+        }
+        return candidate;
+    }, [
+        getUnmetRequirements,
+        lowerRequired,
+        maxLength,
+        minSize,
+        numberRequired,
+        specialCharacterRequired,
+        upperRequired
+    ]);
+    const runValidation = React.useCallback((value) => {
+        if (!value && !required) {
+            setInternalError(null);
+            onValidation?.(null);
+            setUnmetRequirements([]);
+            return;
+        }
+        if (!value && required) {
+            const message = requiredMessage ?? t(i18n, "components.inputs.required");
+            setInternalError(message);
+            onValidation?.(message);
+            setUnmetRequirements([]);
+            return;
+        }
+        const unmet = getUnmetRequirements(value);
+        const isCommon = commonPasswordCheck ? isCommonPassword(value) : false;
+        if (isCommon) {
+            unmet.push(resolvedCommonPasswordMessage);
+        }
+        const customMessage = validation?.(value) ?? null;
+        const combined = customMessage ? [...unmet, customMessage] : unmet;
+        setUnmetRequirements(combined);
+        const message = combined.length > 0 ? (combined[0] ?? null) : null;
+        setInternalError(message);
+        onValidation?.(message);
+    }, [
+        commonPasswordCheck,
+        getUnmetRequirements,
+        i18n,
+        isCommonPassword,
+        onValidation,
+        required,
+        requiredMessage,
+        resolvedCommonPasswordMessage,
+        validation
+    ]);
+    const mergedInputProps = {
+        ...inputProps,
+        "data-sg-password": "true",
+        onChange: (event) => {
+            setHasInteracted(true);
+            runValidation(event.currentTarget.value);
+            inputProps?.onChange?.(event);
+        },
+        onBlur: (event) => {
+            if ((validateOnBlur ?? true) || hasInteracted) {
+                runValidation(event.currentTarget.value);
+            }
+            inputProps?.onBlur?.(event);
+        },
+        ref: undefined
+    };
+    const setRef = (node) => {
+        inputRef.current = node;
+        const ref = inputProps?.ref;
+        if (!ref)
+            return;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref && typeof ref === "object" && "current" in ref) {
+            ref.current = node;
+        }
+    };
+    const applyValue = (value) => {
+        if (inputRef.current) {
+            inputRef.current.value = value;
+        }
+        const event = {
+            target: inputRef.current ?? { value },
+            currentTarget: inputRef.current ?? { value }
+        };
+        mergedInputProps.onChange?.(event);
+        onChange?.(value);
+    };
+    const toggleIcon = (_jsx("button", { type: "button", onClick: () => setIsHidden((prev) => !prev), className: "rounded p-1 text-foreground/60 hover:text-foreground", "aria-label": isHidden ? t(i18n, "components.password.show") : t(i18n, "components.password.hide"), children: isHidden ? (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] })) : (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M17.94 17.94A10.94 10.94 0 0 1 12 19c-6.5 0-10-7-10-7a20.4 20.4 0 0 1 5.06-6.88" }), _jsx("path", { d: "M1 1l22 22" }), _jsx("path", { d: "M9.9 4.24A10.9 10.9 0 0 1 12 5c6.5 0 10 7 10 7a20.3 20.3 0 0 1-3.44 4.65" }), _jsx("path", { d: "M14.12 14.12a3 3 0 0 1-4.24-4.24" })] })) }));
+    const generateIcon = createNewPasswordButton ? (_jsx("button", { type: "button", onClick: () => {
+            const next = generatePassword();
+            applyValue(next);
+        }, className: "rounded p-1 text-foreground/60 hover:text-foreground", "aria-label": t(i18n, "components.password.generate"), title: t(i18n, "components.password.generate"), children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M3 12a9 9 0 1 0 3-6.7" }), _jsx("path", { d: "M3 3v6h6" })] }) })) : null;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+        [data-sg-password]::-ms-reveal,
+        [data-sg-password]::-ms-clear {
+          display: none;
+        }
+      ` }), _jsx(SgInputText, { ...rest, type: isHidden ? "password" : "text", maxLength: maxLength ?? 15, error: error ?? internalError ?? undefined, onClear: () => {
+                    setInternalError(null);
+                    onValidation?.(null);
+                    onClear?.();
+                }, inputProps: { ...mergedInputProps, ref: setRef }, iconButtons: [toggleIcon, ...(generateIcon ? [generateIcon] : []), ...(props.iconButtons ?? [])] }), _jsxs("div", { className: "mt-2", children: [showStrengthBar ? (_jsx("div", { className: "mb-2 flex h-1 w-full gap-1", children: Array.from({ length: 5 }).map((_, index) => (_jsx("span", { className: `h-full flex-1 rounded-full transition-all duration-300 ease-out ${index < Math.min(5, strengthScore) ? getStrengthColor(strengthScore) : "bg-border"}` }, index))) })) : null, (() => {
+                        const unique = Array.from(new Set(unmetRequirements.filter((req) => req !== resolvedCommonPasswordMessage && req !== internalError)));
+                        return unique.length > 0 ? (_jsx("ul", { className: "space-y-1 text-xs text-destructive", children: unique.map((req) => (_jsx("li", { children: req }, req))) })) : null;
+                    })()] })] }));
+}
+function hasSequentialCharacters(value, minLength, direction) {
+    const normalized = value.toLowerCase();
+    const sequences = ["abcdefghijklmnopqrstuvwxyz", "0123456789"];
+    for (const seq of sequences) {
+        for (let i = 0; i <= seq.length - minLength; i += 1) {
+            const part = seq.slice(i, i + minLength);
+            const pattern = direction === "asc" ? part : part.split("").reverse().join("");
+            if (normalized.includes(pattern)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}

package/dist/inputs/SgInputPhone.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { type SgInputTextProps } from "./SgInputText";
+export type SgInputPhoneProps = Omit<SgInputTextProps, "inputProps" | "error"> & {
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    error?: string;
+    required?: boolean;
+    requiredMessage?: string;
+    lengthMessage?: string;
+    invalidMessage?: string;
+    validation?: (value: string) => string | null;
+    onValidation?: (message: string | null) => void;
+    validateOnBlur?: boolean;
+};
+export declare function SgInputPhone(props: Readonly<SgInputPhoneProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgInputPhone.d.ts.map

package/dist/inputs/SgInputPhone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgInputPhone.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputPhone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAInE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,OAAO,CAAC,GAAG;IAC/E,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAMF,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAiF9D"}

package/dist/inputs/SgInputPhone.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { SgInputText } from "./SgInputText";
+import { maskPhone } from "../masks";
+import { t, useComponentsI18n } from "../i18n";
+function onlyDigits(value) {
+    return value.replace(/\D/g, "");
+}
+export function SgInputPhone(props) {
+    const i18n = useComponentsI18n();
+    const { required, requiredMessage, lengthMessage, invalidMessage, validateOnBlur, error, validation, onClear, inputProps, ...rest } = props;
+    const [internalError, setInternalError] = React.useState(null);
+    const [hasInteracted, setHasInteracted] = React.useState(false);
+    const runValidation = React.useCallback((value) => {
+        const digits = onlyDigits(value);
+        if (!digits && !required) {
+            setInternalError(null);
+            props.onValidation?.(null);
+            return;
+        }
+        if (!digits && required) {
+            const message = requiredMessage ?? t(i18n, "components.inputs.required");
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (validation) {
+            const message = validation(value);
+            if (message) {
+                setInternalError(message);
+                props.onValidation?.(message);
+                return;
+            }
+        }
+        if (digits.length !== 10 && digits.length !== 11) {
+            const message = lengthMessage ?? invalidMessage ?? t(i18n, "components.inputs.phone.invalid");
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        setInternalError(null);
+        props.onValidation?.(null);
+    }, [i18n, required, requiredMessage, lengthMessage, invalidMessage, validation, props]);
+    const mergedInputProps = {
+        ...inputProps,
+        inputMode: inputProps?.inputMode ?? "numeric",
+        onChange: (event) => {
+            setHasInteracted(true);
+            event.target.value = maskPhone(event.target.value);
+            runValidation(event.currentTarget.value);
+            inputProps?.onChange?.(event);
+        },
+        onBlur: (event) => {
+            if ((validateOnBlur ?? true) || hasInteracted) {
+                runValidation(event.currentTarget.value);
+            }
+            inputProps?.onBlur?.(event);
+        }
+    };
+    return (_jsx(SgInputText, { ...rest, error: error ?? internalError ?? undefined, textInputType: props.textInputType ?? "numeric", onClear: () => {
+            setInternalError(null);
+            props.onValidation?.(null);
+            onClear?.();
+        }, inputProps: mergedInputProps }));
+}

package/dist/inputs/SgInputPostalCode.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+import { type SgInputTextProps } from "./SgInputText";
+export type PostalCodeCountry = "BR" | "PT" | "US" | "ES" | "UY" | "AR" | "PY";
+export type ViaCepResponse = {
+    cep?: string;
+    logradouro?: string;
+    complemento?: string;
+    bairro?: string;
+    localidade?: string;
+    uf?: string;
+    ibge?: string;
+    gia?: string;
+    ddd?: string;
+    siafi?: string;
+    erro?: boolean;
+};
+export type SgInputPostalCodeProps = Omit<SgInputTextProps, "inputProps" | "error"> & {
+    inputProps?: (React.InputHTMLAttributes<HTMLInputElement> & {
+        ref?: React.Ref<HTMLInputElement>;
+    });
+    error?: string;
+    country?: PostalCodeCountry;
+    required?: boolean;
+    requiredMessage?: string;
+    lengthMessage?: string;
+    invalidMessage?: string;
+    validation?: (value: string) => string | null;
+    onValidation?: (message: string | null) => void;
+    validateOnBlur?: boolean;
+    validateWithViaCep?: boolean;
+    viaCepErrorMessage?: string;
+    viaCepFetch?: (cep: string) => Promise<ViaCepResponse>;
+    onViaCepResult?: (data: ViaCepResponse) => void;
+    onViaCepError?: (error: unknown) => void;
+};
+export declare function SgInputPostalCode(props: Readonly<SgInputPostalCodeProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgInputPostalCode.d.ts.map

package/dist/inputs/SgInputPostalCode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgInputPostalCode.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputPostalCode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAYnE,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/E,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AA8EF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,OAAO,CAAC,GAAG;IACpF,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAcF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,2CA8IxE"}

package/dist/inputs/SgInputPostalCode.js

@@ -0,0 +1,193 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { SgInputText } from "./SgInputText";
+import { maskPostalCodeBR, maskPostalCodePT, maskPostalCodeUS, maskPostalCodeES, maskPostalCodeUY, maskPostalCodeAR, maskPostalCodePY } from "../masks";
+import { t, useComponentsI18n } from "../i18n";
+const COUNTRY_CONFIGS = {
+    BR: {
+        mask: maskPostalCodeBR,
+        rawLength: 8,
+        maxLength: 10,
+        inputMode: "numeric",
+        placeholder: "00000-000",
+        lengthKey: "components.inputs.postalCode.BR.length",
+        invalidKey: "components.inputs.postalCode.BR.invalid"
+    },
+    PT: {
+        mask: maskPostalCodePT,
+        rawLength: 7,
+        maxLength: 8,
+        inputMode: "numeric",
+        placeholder: "0000-000",
+        lengthKey: "components.inputs.postalCode.PT.length",
+        invalidKey: "components.inputs.postalCode.PT.invalid"
+    },
+    US: {
+        mask: maskPostalCodeUS,
+        rawLength: 5,
+        maxLength: 10,
+        inputMode: "numeric",
+        placeholder: "00000",
+        lengthKey: "components.inputs.postalCode.US.length",
+        invalidKey: "components.inputs.postalCode.US.invalid"
+    },
+    ES: {
+        mask: maskPostalCodeES,
+        rawLength: 5,
+        maxLength: 5,
+        inputMode: "numeric",
+        placeholder: "00000",
+        lengthKey: "components.inputs.postalCode.ES.length",
+        invalidKey: "components.inputs.postalCode.ES.invalid"
+    },
+    UY: {
+        mask: maskPostalCodeUY,
+        rawLength: 5,
+        maxLength: 5,
+        inputMode: "numeric",
+        placeholder: "00000",
+        lengthKey: "components.inputs.postalCode.UY.length",
+        invalidKey: "components.inputs.postalCode.UY.invalid"
+    },
+    AR: {
+        mask: maskPostalCodeAR,
+        rawLength: 4,
+        maxLength: 8,
+        inputMode: "text",
+        placeholder: "A0000AAA",
+        lengthKey: "components.inputs.postalCode.AR.length",
+        invalidKey: "components.inputs.postalCode.AR.invalid"
+    },
+    PY: {
+        mask: maskPostalCodePY,
+        rawLength: 6,
+        maxLength: 6,
+        inputMode: "numeric",
+        placeholder: "000000",
+        lengthKey: "components.inputs.postalCode.PY.length",
+        invalidKey: "components.inputs.postalCode.PY.invalid"
+    }
+};
+function extractRaw(value, country) {
+    if (country === "AR") {
+        return value.replaceAll(/[^0-9A-Za-z]/g, "").toUpperCase();
+    }
+    return value.replaceAll(/\D/g, "");
+}
+const defaultViaCepFetch = async (cep) => {
+    const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
+    return (await response.json());
+};
+export function SgInputPostalCode(props) {
+    const i18n = useComponentsI18n();
+    const { country = "BR", required, requiredMessage, lengthMessage, invalidMessage, validateOnBlur, error, validation, onClear, inputProps, validateWithViaCep, viaCepErrorMessage, viaCepFetch, onViaCepResult, onViaCepError, ...rest } = props;
+    const config = COUNTRY_CONFIGS[country];
+    const [internalError, setInternalError] = React.useState(null);
+    const [hasInteracted, setHasInteracted] = React.useState(false);
+    const lastValidatedRef = React.useRef(null);
+    const lastViaCepErroRef = React.useRef(null);
+    const runValidation = React.useCallback(async (value) => {
+        const raw = extractRaw(value, country);
+        if (!raw && !required) {
+            setInternalError(null);
+            props.onValidation?.(null);
+            return;
+        }
+        if (!raw && required) {
+            const message = requiredMessage ?? t(i18n, "components.inputs.required");
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (validation) {
+            const message = validation(value);
+            if (message) {
+                setInternalError(message);
+                props.onValidation?.(message);
+                return;
+            }
+        }
+        const expectedLength = country === "US"
+            ? (raw.length > 5 ? 9 : 5)
+            : country === "AR"
+                ? (raw.length > 4 ? 8 : 4)
+                : config.rawLength;
+        if (raw.length !== expectedLength) {
+            const message = lengthMessage ?? t(i18n, config.lengthKey);
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (country === "BR" && validateWithViaCep) {
+            if (lastValidatedRef.current === raw) {
+                const message = viaCepErrorMessage ?? invalidMessage ?? t(i18n, config.invalidKey);
+                if (lastViaCepErroRef.current) {
+                    setInternalError(message);
+                    props.onValidation?.(message);
+                }
+                else {
+                    setInternalError(null);
+                    props.onValidation?.(null);
+                }
+                return;
+            }
+            try {
+                const checker = viaCepFetch ?? defaultViaCepFetch;
+                const data = await checker(raw);
+                lastValidatedRef.current = raw;
+                lastViaCepErroRef.current = Boolean(data?.erro);
+                onViaCepResult?.(data);
+                if (data?.erro) {
+                    const message = viaCepErrorMessage ?? invalidMessage ?? t(i18n, config.invalidKey);
+                    setInternalError(message);
+                    props.onValidation?.(message);
+                    return;
+                }
+            }
+            catch (err) {
+                onViaCepError?.(err);
+            }
+        }
+        setInternalError(null);
+        props.onValidation?.(null);
+    }, [
+        config,
+        country,
+        i18n,
+        invalidMessage,
+        lengthMessage,
+        onViaCepError,
+        onViaCepResult,
+        props,
+        required,
+        requiredMessage,
+        validateWithViaCep,
+        validation,
+        viaCepErrorMessage,
+        viaCepFetch
+    ]);
+    const mergedInputProps = {
+        ...inputProps,
+        inputMode: inputProps?.inputMode ?? config.inputMode,
+        onChange: (event) => {
+            setHasInteracted(true);
+            event.target.value = config.mask(event.target.value);
+            runValidation(event.currentTarget.value);
+            inputProps?.onChange?.(event);
+        },
+        onBlur: (event) => {
+            if ((validateOnBlur ?? true) || hasInteracted) {
+                runValidation(event.currentTarget.value);
+            }
+            inputProps?.onBlur?.(event);
+        }
+    };
+    return (_jsx(SgInputText, { ...rest, maxLength: rest.maxLength ?? config.maxLength, error: error ?? internalError ?? undefined, textInputType: props.textInputType ?? (config.inputMode === "numeric" ? "numeric" : undefined), onClear: () => {
+            setInternalError(null);
+            props.onValidation?.(null);
+            onClear?.();
+            lastValidatedRef.current = null;
+            lastViaCepErroRef.current = null;
+        }, inputProps: mergedInputProps }));
+}

package/dist/inputs/SgInputSelect.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { RhfFieldProps } from "../rhf";
+export type SgInputSelectProps = {
+    id: string;
+    label: string;
+    error?: string;
+    className?: string;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    selectProps: React.SelectHTMLAttributes<HTMLSelectElement>;
+    alwaysFloat?: boolean;
+} & RhfFieldProps;
+export declare function SgInputSelect(props: SgInputSelectProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgInputSelect.d.ts.map

package/dist/inputs/SgInputSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgInputSelect.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,WAAW,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,aAAa,CAAC;AAwJlB,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAwBtD"}