@seedgrid/fe-components 0.2.4

package/dist/inputs/SgInputNumber.js

@@ -0,0 +1,438 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { X } from "lucide-react";
+import { Controller } from "react-hook-form";
+import { t, useComponentsI18n } from "../i18n";
+function ErrorText(props) {
+    if (!props.message)
+        return null;
+    return _jsx("p", { "data-sg-error": true, className: "text-xs text-red-600", children: props.message });
+}
+function mergeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (!ref)
+                continue;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (typeof ref === "object" && "current" in ref) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function getSeparators(locale) {
+    try {
+        const parts = new Intl.NumberFormat(locale).formatToParts(1000.1);
+        const group = parts.find((p) => p.type === "group")?.value ?? ",";
+        const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+        return { group, decimal };
+    }
+    catch {
+        return { group: ",", decimal: "." };
+    }
+}
+function normalizeState(raw, decimals, allowNegative, decimalSep) {
+    let text = raw ?? "";
+    const isNegative = allowNegative && text.includes("-");
+    text = text.replace(/[^0-9.,]/g, "");
+    const lastDot = text.lastIndexOf(".");
+    const lastComma = text.lastIndexOf(",");
+    const decimalIndex = Math.max(lastDot, lastComma);
+    let intPart = "";
+    let decPart = "";
+    let hasDecimal = false;
+    if (decimalIndex >= 0) {
+        hasDecimal = true;
+        intPart = text.slice(0, decimalIndex).replace(/[^0-9]/g, "");
+        decPart = text.slice(decimalIndex + 1).replace(/[^0-9]/g, "");
+    }
+    else {
+        intPart = text.replace(/[^0-9]/g, "");
+    }
+    if (!intPart)
+        intPart = "0";
+    if (decimals > 0) {
+        decPart = decPart.slice(0, decimals);
+    }
+    else {
+        decPart = "";
+        hasDecimal = false;
+    }
+    return {
+        negative: isNegative,
+        intDigits: intPart,
+        decDigits: decPart,
+        hasDecimal
+    };
+}
+function formatWithGroup(intDigits, group) {
+    const clean = intDigits.replace(/^0+(?!$)/, "");
+    return clean.replace(/\B(?=(\d{3})+(?!\d))/g, group);
+}
+function stateToDisplay(state, decimals, decimalSep, group) {
+    if (!state)
+        return "";
+    const intPart = formatWithGroup(state.intDigits, group);
+    if (decimals <= 0)
+        return `${state.negative ? "-" : ""}${intPart}`;
+    const decPart = state.decDigits.padEnd(decimals, "0");
+    return `${state.negative ? "-" : ""}${intPart}${decimalSep}${decPart}`;
+}
+function stateToValue(state, decimals) {
+    if (!state)
+        return "";
+    const intPart = state.intDigits.replace(/^0+(?!$)/, "");
+    if (decimals <= 0)
+        return `${state.negative ? "-" : ""}${intPart || "0"}`;
+    const decPart = state.decDigits.padEnd(decimals, "0");
+    return `${state.negative ? "-" : ""}${intPart || "0"}.${decPart}`;
+}
+function stateToNumber(state, decimals) {
+    if (!state)
+        return null;
+    const value = stateToValue(state, decimals);
+    const num = Number(value);
+    if (Number.isNaN(num))
+        return null;
+    return num;
+}
+function setCaretToEnd(input) {
+    if (!input)
+        return;
+    const length = input.value.length;
+    try {
+        input.setSelectionRange(length, length);
+    }
+    catch {
+        // ignore
+    }
+}
+function SgInputNumberBase(props) {
+    const i18n = useComponentsI18n();
+    const decimals = props.decimals ?? 2;
+    const allowNegative = props.allowNegative ?? true;
+    const emptyValue = props.emptyValue ?? "zero";
+    const { decimal: decimalSep, group: groupSep } = getSeparators(i18n.locale);
+    const inputProps = props.inputProps ?? {};
+    const { value: _ignoredValue, defaultValue: _ignoredDefault, onChange: inputOnChange, ...restInputProps } = inputProps;
+    const labelText = props.labelText ?? props.label ?? "";
+    const placeholder = props.placeholder ?? props.hintText ?? labelText;
+    const inputRef = React.useRef(null);
+    const prefixRef = React.useRef(null);
+    const suffixRef = React.useRef(null);
+    const [prefixWidth, setPrefixWidth] = React.useState(0);
+    const [suffixWidth, setSuffixWidth] = React.useState(0);
+    const [internalError, setInternalError] = React.useState(null);
+    const [hasInteracted, setHasInteracted] = React.useState(false);
+    const initialState = React.useMemo(() => {
+        const raw = props.externalValue ?? inputProps.value ?? inputProps.defaultValue ?? "";
+        if ((raw === "" || raw == null) && emptyValue === "null")
+            return null;
+        return normalizeState(String(raw), decimals, allowNegative, decimalSep);
+    }, [props.externalValue, inputProps.value, inputProps.defaultValue, emptyValue, decimals, allowNegative, decimalSep]);
+    const [state, setState] = React.useState(initialState);
+    const stateRef = React.useRef(initialState);
+    const lastEmittedRef = React.useRef(null);
+    React.useEffect(() => {
+        const raw = props.externalValue ?? inputProps.value;
+        if (raw === undefined)
+            return;
+        if (inputRef.current) {
+            const isFocused = typeof document !== "undefined" && document.activeElement === inputRef.current;
+            if (isFocused && lastEmittedRef.current === String(raw ?? "")) {
+                return;
+            }
+        }
+        if ((raw === "" || raw == null) && emptyValue === "null") {
+            stateRef.current = null;
+            setState(null);
+            return;
+        }
+        const next = normalizeState(String(raw), decimals, allowNegative, decimalSep);
+        stateRef.current = next;
+        setState(next);
+    }, [props.externalValue, inputProps.value, emptyValue, decimals, allowNegative, decimalSep]);
+    // Locale change only affects formatting. State is locale-agnostic (digits + flags).
+    React.useLayoutEffect(() => {
+        if (prefixRef.current) {
+            const next = prefixRef.current.offsetWidth;
+            if (next !== prefixWidth)
+                setPrefixWidth(next);
+        }
+        else if (prefixWidth !== 0) {
+            setPrefixWidth(0);
+        }
+        if (suffixRef.current) {
+            const next = suffixRef.current.offsetWidth;
+            if (next !== suffixWidth)
+                setSuffixWidth(next);
+        }
+        else if (suffixWidth !== 0) {
+            setSuffixWidth(0);
+        }
+    }, [props.prefixText, props.suffixText, prefixWidth, suffixWidth]);
+    const displayValue = stateToDisplay(state, decimals, decimalSep, groupSep);
+    const isFilled = displayValue.length > 0;
+    const runValidation = React.useCallback((valueState) => {
+        const required = props.required ?? false;
+        const numberValue = stateToNumber(valueState, decimals);
+        const isZeroValue = valueState != null &&
+            valueState.negative === false &&
+            valueState.intDigits.replace(/^0+(?!$)/, "0") === "0" &&
+            (decimals <= 0 || valueState.decDigits.replace(/0/g, "") === "");
+        if (!valueState || numberValue === null || (emptyValue === "zero" && isZeroValue)) {
+            if (required) {
+                const message = props.requiredMessage ?? t(i18n, "components.inputs.required");
+                setInternalError(message);
+                props.onValidation?.(message);
+                return;
+            }
+            setInternalError(null);
+            props.onValidation?.(null);
+            return;
+        }
+        if (props.minValue !== undefined && numberValue < props.minValue) {
+            const message = props.minValueMessage ?? t(i18n, "components.inputs.number.min", { min: props.minValue });
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (props.maxValue !== undefined && numberValue > props.maxValue) {
+            const message = props.maxValueMessage ?? t(i18n, "components.inputs.number.max", { max: props.maxValue });
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (props.validation) {
+            const message = props.validation(stateToValue(valueState, decimals));
+            setInternalError(message);
+            props.onValidation?.(message ?? null);
+            return;
+        }
+        setInternalError(null);
+        props.onValidation?.(null);
+    }, [props, i18n, decimals]);
+    const commitState = React.useCallback((next) => {
+        stateRef.current = next;
+        setState(next);
+        setHasInteracted(true);
+        const value = stateToValue(next, decimals);
+        lastEmittedRef.current = value;
+        props.onExternalChange?.(value);
+        props.onChange?.(value);
+        if (inputOnChange) {
+            inputOnChange({
+                target: { value },
+                currentTarget: { value }
+            });
+        }
+        if (props.validateOnBlur === false) {
+            runValidation(next);
+        }
+    }, [decimals, props, runValidation, inputOnChange]);
+    const handleKeyDown = (event) => {
+        if (props.readOnly || props.enabled === false || inputProps.readOnly)
+            return;
+        if (event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        const key = event.key;
+        if (key === "Tab" || key === "ArrowLeft" || key === "ArrowRight" || key === "Home" || key === "End") {
+            return;
+        }
+        event.preventDefault();
+        if (key === "Backspace" || key === "Delete") {
+            const current = stateRef.current;
+            if (!current) {
+                if (emptyValue === "zero") {
+                    commitState({ negative: false, intDigits: "0", decDigits: "", hasDecimal: false });
+                }
+                return;
+            }
+            if (current.hasDecimal && current.decDigits.length > 0) {
+                commitState({ ...current, decDigits: current.decDigits.slice(0, -1) });
+                return;
+            }
+            if (current.hasDecimal && current.decDigits.length === 0) {
+                commitState({ ...current, hasDecimal: false });
+                return;
+            }
+            const nextInt = current.intDigits.slice(0, -1);
+            if (!nextInt) {
+                if (emptyValue === "null") {
+                    commitState(null);
+                }
+                else {
+                    commitState({ ...current, intDigits: "0" });
+                }
+                return;
+            }
+            commitState({ ...current, intDigits: nextInt });
+            return;
+        }
+        if ((key === "-" || key === "_") && allowNegative) {
+            const base = stateRef.current ?? { negative: false, intDigits: "0", decDigits: "", hasDecimal: false };
+            const next = base;
+            commitState({ ...next, negative: !next.negative });
+            return;
+        }
+        const isDecimalKey = key === decimalSep || key === "." || key === ",";
+        if (isDecimalKey) {
+            if (decimals <= 0)
+                return;
+            const next = stateRef.current ?? { negative: false, intDigits: "0", decDigits: "", hasDecimal: false };
+            const decDigits = next.decDigits.length >= decimals ? "" : next.decDigits;
+            commitState({ ...next, hasDecimal: true, decDigits });
+            return;
+        }
+        if (/\d/.test(key)) {
+            const next = stateRef.current ?? { negative: false, intDigits: "0", decDigits: "", hasDecimal: false };
+            if (next.hasDecimal && decimals > 0 && next.decDigits.length < decimals) {
+                commitState({ ...next, decDigits: `${next.decDigits}${key}` });
+                return;
+            }
+            const intDigits = next.intDigits === "0" ? key : `${next.intDigits}${key}`;
+            commitState({ ...next, intDigits });
+            return;
+        }
+    };
+    const handleChange = (event) => {
+        if (props.readOnly || props.enabled === false || inputProps.readOnly)
+            return;
+        const parsed = normalizeState(event.currentTarget.value, decimals, allowNegative, decimalSep);
+        commitState(parsed);
+    };
+    const handlePaste = (event) => {
+        if (props.readOnly || props.enabled === false || inputProps.readOnly)
+            return;
+        const text = event.clipboardData.getData("text");
+        if (!text)
+            return;
+        event.preventDefault();
+        const parsed = normalizeState(text, decimals, allowNegative, decimalSep);
+        commitState(parsed);
+    };
+    const handleBlur = (event) => {
+        if ((props.validateOnBlur ?? true) || hasInteracted) {
+            runValidation(state);
+        }
+        inputProps.onBlur?.(event);
+        props.onExit?.();
+    };
+    const handleFocus = () => {
+        props.onEnter?.();
+    };
+    const handleClear = () => {
+        if (!inputRef.current)
+            return;
+        const next = emptyValue === "null"
+            ? null
+            : { negative: false, intDigits: "0", decDigits: "", hasDecimal: false };
+        commitState(next);
+        if (inputRef.current) {
+            inputRef.current.value = stateToDisplay(next, decimals, decimalSep, groupSep);
+            setCaretToEnd(inputRef.current);
+        }
+        props.onClear?.();
+    };
+    React.useEffect(() => {
+        if (!inputRef.current)
+            return;
+        inputRef.current.value = displayValue;
+        setCaretToEnd(inputRef.current);
+    }, [displayValue]);
+    const isDisabled = props.enabled === false || props.readOnly || inputProps.readOnly;
+    const canShowClear = (props.clearButton ?? true) && !isDisabled;
+    const iconButtonsCount = props.iconButtons?.length ?? 0;
+    const hasSuffix = canShowClear || iconButtonsCount > 0;
+    const paddingLeft = props.prefixIcon ? "pl-10" : "px-3";
+    const paddingRight = hasSuffix ? "pr-10" : "pr-3";
+    const baseClass = "peer h-11 w-full rounded-md text-sm placeholder-transparent focus:outline-none text-right";
+    const hasError = Boolean(props.error ?? internalError);
+    const borderClass = (props.withBorder ?? true) || hasError
+        ? hasError
+            ? "border border-[hsl(var(--destructive))] shadow-sm focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
+            : "border border-border shadow-sm focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]"
+        : "border border-transparent";
+    const bgClass = props.filled ? "bg-muted/40" : "bg-white";
+    const finalClass = [
+        baseClass,
+        borderClass,
+        bgClass,
+        paddingLeft,
+        paddingRight,
+        "py-2",
+        "leading-[1.2]"
+    ].join(" ");
+    let resolvedBorderRadius;
+    if (props.borderRadius !== undefined) {
+        resolvedBorderRadius =
+            typeof props.borderRadius === "number"
+                ? `${props.borderRadius}px`
+                : props.borderRadius;
+    }
+    const prefixPaddingStyle = props.prefixText
+        ? `calc(${prefixWidth}px + 0.75rem${props.prefixIcon ? " + 0.75rem" : ""})`
+        : undefined;
+    const iconButtonsPadding = iconButtonsCount > 0 ? `${iconButtonsCount * 1.5}rem` : "0rem";
+    const baseRightPadding = canShowClear ? "2rem" : "0.75rem";
+    const suffixPaddingStyle = props.suffixText
+        ? `calc(${suffixWidth}px + ${baseRightPadding} + ${iconButtonsPadding})`
+        : hasSuffix
+            ? `calc(${baseRightPadding} + ${iconButtonsPadding})`
+            : undefined;
+    const clearRightStyle = props.suffixText && suffixWidth
+        ? `${suffixWidth}px`
+        : undefined;
+    return (_jsxs("div", { style: { width: props.width ?? "100%" }, children: [_jsxs("div", { className: "relative", children: [props.prefixText ? (_jsx("span", { ref: prefixRef, className: "pointer-events-none absolute left-0 top-0 z-10 flex h-11 items-center rounded-l-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: props.prefixText })) : null, props.prefixIcon ? (_jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-foreground/60", children: props.prefixIcon })) : null, _jsx("input", { id: props.id, type: props.type ?? "text", placeholder: placeholder, className: props.className ?? finalClass, style: {
+                            borderRadius: resolvedBorderRadius,
+                            paddingLeft: prefixPaddingStyle,
+                            paddingRight: suffixPaddingStyle,
+                            ...(props.prefixText ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderLeftWidth: 0 } : {}),
+                            ...(props.suffixText ? { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 } : {}),
+                            ...(inputProps.style ?? {})
+                        }, inputMode: props.textInputType ?? "decimal", readOnly: props.readOnly, disabled: props.enabled === false, ...restInputProps, ref: mergeRefs(inputRef, inputProps?.ref), onKeyDown: handleKeyDown, onChange: handleChange, onPaste: handlePaste, onBlur: handleBlur, onFocus: handleFocus }), props.suffixText ? (_jsx("span", { ref: suffixRef, className: "pointer-events-none absolute right-0 top-0 z-10 flex h-11 items-center rounded-r-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: props.suffixText })) : null, _jsxs("label", { htmlFor: props.id, className: [
+                            "absolute bg-white px-1 transition-all",
+                            isFilled
+                                ? "-top-2 left-3 text-xs"
+                                : `top-3 text-sm ${props.prefixIcon ? "left-10" : "left-3"}`,
+                            hasError
+                                ? "text-[hsl(var(--destructive))]"
+                                : isFilled
+                                    ? "text-[hsl(var(--primary))]"
+                                    : "text-foreground/60",
+                            hasError
+                                ? "peer-focus:-top-2 peer-focus:left-3 peer-focus:text-xs peer-focus:text-[hsl(var(--destructive))]"
+                                : "peer-focus:-top-2 peer-focus:left-3 peer-focus:text-xs peer-focus:text-[hsl(var(--primary))]",
+                            props.labelClassName ?? ""
+                        ].join(" "), style: prefixPaddingStyle ? { left: prefixPaddingStyle } : undefined, children: [_jsx("span", { children: labelText }), props.required ? (_jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", "aria-hidden": "true", children: "*" })) : null] }), hasSuffix ? (_jsxs("span", { className: "absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1", style: clearRightStyle ? { right: clearRightStyle } : undefined, children: [canShowClear ? (_jsx("button", { type: "button", onClick: handleClear, className: "rounded px-1 text-xs text-foreground/60 hover:text-foreground", "aria-label": t(i18n, "components.actions.clear"), children: _jsx(X, { size: 16 }) })) : null, props.iconButtons?.map((node, index) => (_jsx("span", { children: node }, index)))] })) : null] }), _jsx("div", { className: "mt-1 flex items-center justify-between gap-2", children: _jsx(ErrorText, { message: props.error ?? internalError ?? undefined }) })] }));
+}
+export function SgInputNumber(props) {
+    const { control, name, register, rules, ...rest } = props;
+    if (name && register) {
+        const reg = register(name, rules);
+        return (_jsx(SgInputNumberBase, { ...rest, onExternalChange: (value) => {
+                reg.onChange({ target: { name, value } });
+            }, inputProps: {
+                ...rest.inputProps,
+                name,
+                ref: mergeRefs(reg.ref, rest.inputProps?.ref),
+                onBlur: (event) => {
+                    reg.onBlur(event);
+                    rest.inputProps?.onBlur?.(event);
+                }
+            } }));
+    }
+    if (control && name) {
+        return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgInputNumberBase, { ...rest, externalValue: field.value, onExternalChange: (value) => field.onChange(value), error: rest.error ?? fieldState.error?.message, inputProps: {
+                    ...rest.inputProps,
+                    onBlur: (event) => {
+                        field.onBlur();
+                        rest.inputProps?.onBlur?.(event);
+                    }
+                } })) }));
+    }
+    return _jsx(SgInputNumberBase, { ...rest });
+}

package/dist/inputs/SgInputPassword.d.ts

@@ -0,0 +1,26 @@
+import { type SgInputTextProps } from "./SgInputText";
+export type SgInputPasswordProps = Omit<SgInputTextProps, "type" | "error" | "validation" | "required" | "requiredMessage" | "validateOnBlur"> & {
+    error?: string;
+    onValidation?: (message: string | null) => void;
+    required?: boolean;
+    requiredMessage?: string;
+    validateOnBlur?: boolean;
+    hidePassword?: boolean;
+    maxLength?: number;
+    validation?: (value: string) => string | null;
+    createNewPasswordButton?: boolean;
+    showStrengthBar?: boolean;
+    commonPasswordCheck?: boolean;
+    commonPasswordMessage?: string;
+    commonPasswordList?: string[];
+    upperRequired?: boolean;
+    lowerRequired?: boolean;
+    numberRequired?: boolean;
+    specialCharacterRequired?: boolean;
+    prohibitsRepeatedCharactersInSequence?: boolean;
+    prohibitsSequentialAscCharacters?: boolean;
+    prohibitsSequentialDescCharacters?: boolean;
+    minSize?: number;
+};
+export declare function SgInputPassword(props: Readonly<SgInputPasswordProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgInputPassword.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgInputPassword.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputPassword.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAInE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,gBAAgB,EAChB,MAAM,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,iBAAiB,GAAG,gBAAgB,CACpF,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,qCAAqC,CAAC,EAAE,OAAO,CAAC;IAChD,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,2CA+YpE"}