@seedgrid/fe-components 0.2.4

package/dist/inputs/SgInputSelect.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Controller } from "react-hook-form";
+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 mergeSelectPropsWithField(selectProps, field) {
+    const resolvedValue = typeof field.value === "string" || typeof field.value === "number" || Array.isArray(field.value)
+        ? field.value
+        : field.value == null
+            ? ""
+            : String(field.value);
+    return {
+        ...selectProps,
+        value: resolvedValue,
+        onChange: (event) => {
+            field.onChange(event);
+            selectProps?.onChange?.(event);
+        },
+        onBlur: (event) => {
+            field.onBlur();
+            selectProps?.onBlur?.(event);
+        },
+        ref: (node) => {
+            field.ref(node);
+            const ref = selectProps?.ref;
+            if (!ref)
+                return;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref && typeof ref === "object" && "current" in ref) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function SgInputSelectBase(props) {
+    const selectRef = React.useRef(null);
+    const [isFilled, setIsFilled] = React.useState(() => {
+        const value = props.selectProps.value ?? props.selectProps.defaultValue ?? "";
+        return String(value).length > 0;
+    });
+    React.useEffect(() => {
+        const next = (selectRef.current?.value ?? "").length > 0;
+        if (next !== isFilled)
+            setIsFilled(next);
+    });
+    React.useEffect(() => {
+        if (props.selectProps.value === undefined)
+            return;
+        setIsFilled(String(props.selectProps.value ?? "").length > 0);
+    }, [props.selectProps.value]);
+    const setRefs = React.useCallback((node) => {
+        selectRef.current = node;
+        const ref = props.selectProps.ref;
+        if (!ref)
+            return;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (typeof ref === "object") {
+            ref.current = node;
+        }
+    }, [props.selectProps]);
+    const handleChange = (event) => {
+        setIsFilled(event.currentTarget.value.length > 0);
+        props.selectProps.onChange?.(event);
+    };
+    const handleBlur = (event) => {
+        setIsFilled(event.currentTarget.value.length > 0);
+        props.selectProps.onBlur?.(event);
+    };
+    const alwaysFloat = props.alwaysFloat ?? (props.selectProps?.["data-floating"] === "always");
+    return (_jsxs("div", { children: [_jsxs("div", { className: "relative", children: [alwaysFloat ? (_jsx("label", { htmlFor: props.id, className: [
+                            "pointer-events-none absolute left-3 top-0 z-10 -translate-y-1/2 bg-white px-1 text-[11px] font-medium leading-none",
+                            props.error ? "text-[hsl(var(--destructive))]" : "text-foreground/70"
+                        ].join(" "), children: props.label })) : null, (() => {
+                        const hasError = Boolean(props.error);
+                        const baseClass = "peer h-11 w-full rounded-md bg-white px-3 pt-4 text-sm shadow-sm focus:outline-none";
+                        const borderClass = hasError
+                            ? "border border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
+                            : "border border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]";
+                        const resolvedClassName = props.className ?? [baseClass, borderClass].join(" ");
+                        return (_jsxs("select", { id: props.id, className: resolvedClassName, ...props.selectProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, children: [_jsx("option", { value: "", children: "Selecione" }), props.options.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }));
+                    })(), alwaysFloat ? (_jsx("label", { htmlFor: props.id, className: "sr-only", children: props.label })) : (_jsx("label", { htmlFor: props.id, className: [
+                            "absolute left-3 bg-white px-1 transition-all",
+                            isFilled ? "-top-2 text-xs" : "top-3 text-sm",
+                            props.error ? "text-[hsl(var(--destructive))]" : isFilled ? "text-[hsl(var(--primary))]" : "text-foreground/60",
+                            props.error
+                                ? "peer-focus:-top-2 peer-focus:text-xs peer-focus:text-[hsl(var(--destructive))]"
+                                : "peer-focus:-top-2 peer-focus:text-xs peer-focus:text-[hsl(var(--primary))]"
+                        ].join(" "), children: props.label }))] }), _jsx(ErrorText, { message: props.error })] }));
+}
+export function SgInputSelect(props) {
+    const { control, name, ...rest } = props;
+    if (control && name) {
+        return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgInputSelectBase, { ...rest, error: rest.error ?? fieldState.error?.message, selectProps: mergeSelectPropsWithField(rest.selectProps, field) })) }));
+    }
+    return _jsx(SgInputSelectBase, { ...rest });
+}

package/dist/inputs/SgInputText.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import type { FieldValues, RegisterOptions, UseFormRegister } from "react-hook-form";
+import type { RhfFieldProps } from "../rhf";
+export type SgInputTextProps = {
+    id: string;
+    label?: string;
+    labelText?: string;
+    hintText?: string;
+    prefixText?: string;
+    suffixText?: string;
+    error?: string;
+    type?: React.HTMLInputTypeAttribute;
+    placeholder?: string;
+    className?: string;
+    labelClassName?: string;
+    inputProps?: (React.InputHTMLAttributes<HTMLInputElement> & {
+        ref?: React.Ref<HTMLInputElement>;
+    });
+    maxLength?: number;
+    maxLengthMessage?: string;
+    minLength?: number;
+    minLengthMessage?: string;
+    minNumberOfWords?: number;
+    minNumberOfWordsMessage?: string;
+    prefixIcon?: React.ReactNode;
+    width?: number | string;
+    clearButton?: boolean;
+    filled?: boolean;
+    enabled?: boolean;
+    textInputType?: React.InputHTMLAttributes<HTMLInputElement>["inputMode"];
+    onEnter?: () => void;
+    onExit?: () => void;
+    onChange?: (value: string) => void;
+    onClear?: () => void;
+    withBorder?: boolean;
+    borderRadius?: number | string;
+    required?: boolean;
+    requiredMessage?: string;
+    showCharCounter?: boolean;
+    iconButtons?: React.ReactNode[];
+    readOnly?: boolean;
+    validation?: (value: string) => string | null;
+    validateOnBlur?: boolean;
+    onValidation?: (message: string | null) => void;
+    register?: UseFormRegister<FieldValues>;
+    rules?: RegisterOptions<FieldValues>;
+} & RhfFieldProps;
+export declare function SgInputText(props: SgInputTextProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgInputText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgInputText.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAGV,WAAW,EACX,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAC;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CACtC,GAAG,aAAa,CAAC;AAyYlB,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA8DlD"}

package/dist/inputs/SgInputText.js

@@ -0,0 +1,336 @@
+"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 mergeInputPropsWithField(inputProps, field, options) {
+    const resolvedValue = options?.normalizeValue
+        ? options.normalizeValue(field.value)
+        : typeof field.value === "string" ||
+            typeof field.value === "number" ||
+            Array.isArray(field.value)
+            ? field.value
+            : field.value == null
+                ? ""
+                : String(field.value);
+    return {
+        ...inputProps,
+        value: resolvedValue,
+        onChange: (event) => {
+            if (options?.toFieldValue) {
+                field.onChange(options.toFieldValue(event.currentTarget.value));
+            }
+            else {
+                field.onChange(event);
+            }
+            inputProps?.onChange?.(event);
+        },
+        onBlur: (event) => {
+            field.onBlur();
+            inputProps?.onBlur?.(event);
+        },
+        ref: (node) => {
+            field.ref(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;
+            }
+        }
+    };
+}
+function SgInputTextBase(props) {
+    const i18n = useComponentsI18n();
+    const inputProps = props.inputProps ?? {};
+    const prefixText = props.prefixText ?? "";
+    const suffixText = props.suffixText ?? "";
+    const stripAffixes = React.useCallback((value) => {
+        if (value == null)
+            return "";
+        let text = String(value);
+        if (!text)
+            return "";
+        if (prefixText && text.startsWith(prefixText)) {
+            text = text.slice(prefixText.length);
+        }
+        if (suffixText && text.endsWith(suffixText)) {
+            text = text.slice(0, -suffixText.length);
+        }
+        return text;
+    }, [prefixText, suffixText]);
+    const buildFullValue = React.useCallback((raw) => {
+        if (!raw)
+            return "";
+        return `${prefixText}${raw}${suffixText}`;
+    }, [prefixText, suffixText]);
+    const resolvedInputProps = React.useMemo(() => {
+        const next = {
+            ...inputProps
+        };
+        if (inputProps.value !== undefined) {
+            next.value = stripAffixes(inputProps.value);
+        }
+        return next;
+    }, [inputProps, stripAffixes]);
+    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 [isFilled, setIsFilled] = React.useState(() => {
+        const value = stripAffixes(inputProps.value ?? inputProps.defaultValue ?? "");
+        return value.length > 0;
+    });
+    const [valueLength, setValueLength] = React.useState(() => {
+        const value = stripAffixes(inputProps.value ?? inputProps.defaultValue ?? "");
+        return value.length;
+    });
+    React.useEffect(() => {
+        const next = (inputRef.current?.value ?? "").length > 0;
+        if (next !== isFilled)
+            setIsFilled(next);
+        const nextLength = (inputRef.current?.value ?? "").length;
+        setValueLength((prev) => (prev === nextLength ? prev : nextLength));
+    }, [isFilled]);
+    React.useEffect(() => {
+        if (inputProps.value === undefined)
+            return;
+        const raw = stripAffixes(inputProps.value ?? "");
+        setIsFilled(raw.length > 0);
+        setValueLength(raw.length);
+    }, [inputProps.value, stripAffixes]);
+    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);
+        }
+    }, [prefixText, suffixText, prefixWidth, suffixWidth]);
+    const setRefs = React.useCallback((node) => {
+        inputRef.current = node;
+        const ref = resolvedInputProps.ref;
+        if (!ref)
+            return;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (typeof ref === "object") {
+            ref.current = node;
+        }
+    }, [inputProps]);
+    const runValidation = React.useCallback((value) => {
+        const required = props.required ?? false;
+        if (!value && required) {
+            const message = props.requiredMessage ?? t(i18n, "components.inputs.required");
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (props.maxLength && value.length > props.maxLength) {
+            const message = props.maxLengthMessage ??
+                t(i18n, "components.inputs.maxLength", { max: props.maxLength });
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (props.minLength && value.length < props.minLength) {
+            const message = props.minLengthMessage ??
+                t(i18n, "components.inputs.minLength", { min: props.minLength });
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (props.minNumberOfWords && wordCount(value) < props.minNumberOfWords) {
+            const message = props.minNumberOfWordsMessage ??
+                t(i18n, "components.inputs.minWords", { min: props.minNumberOfWords });
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (props.validation) {
+            const message = props.validation(value);
+            setInternalError(message);
+            props.onValidation?.(message ?? null);
+            return;
+        }
+        setInternalError(null);
+        props.onValidation?.(null);
+    }, [i18n, props]);
+    const handleChange = (event) => {
+        resolvedInputProps.onChange?.(event);
+        const rawValue = event.currentTarget.value;
+        setIsFilled(rawValue.length > 0);
+        setValueLength(rawValue.length);
+        setHasInteracted(true);
+        if (props.validateOnBlur === false) {
+            runValidation(rawValue);
+        }
+        props.onChange?.(buildFullValue(rawValue));
+    };
+    const handleBlur = (event) => {
+        setIsFilled(event.currentTarget.value.length > 0);
+        if ((props.validateOnBlur ?? true) || hasInteracted) {
+            runValidation(event.currentTarget.value);
+        }
+        resolvedInputProps.onBlur?.(event);
+        props.onExit?.();
+    };
+    const handleFocus = () => {
+        props.onEnter?.();
+    };
+    const handleClear = () => {
+        if (!inputRef.current)
+            return;
+        inputRef.current.value = "";
+        setIsFilled(false);
+        setValueLength(0);
+        const event = {
+            target: inputRef.current,
+            currentTarget: inputRef.current
+        };
+        resolvedInputProps.onChange?.(event);
+        props.onChange?.("");
+        props.onClear?.();
+    };
+    const isDisabled = props.enabled === false || props.readOnly || resolvedInputProps.readOnly;
+    const canShowClear = (props.clearButton ?? true) && !isDisabled;
+    const hasSuffix = canShowClear || (props.iconButtons?.length ?? 0) > 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";
+    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]",
+        prefixText && suffixText ? "text-center" : suffixText ? "text-right" : "text-left"
+    ].join(" ");
+    let resolvedBorderRadius;
+    if (props.borderRadius !== undefined) {
+        resolvedBorderRadius =
+            typeof props.borderRadius === "number"
+                ? `${props.borderRadius}px`
+                : props.borderRadius;
+    }
+    const prefixPaddingStyle = prefixText
+        ? `calc(${prefixWidth}px + 0.75rem${props.prefixIcon ? " + 0.75rem" : ""})`
+        : undefined;
+    const suffixPaddingStyle = suffixText
+        ? `calc(${suffixWidth}px + ${canShowClear ? "2rem" : "0.75rem"})`
+        : undefined;
+    const clearRightStyle = suffixText && suffixWidth
+        ? `${suffixWidth}px`
+        : undefined;
+    return (_jsxs("div", { style: { width: props.width ?? "100%" }, children: [_jsxs("div", { className: "relative", children: [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: 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,
+                            ...(prefixText ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderLeftWidth: 0 } : {}),
+                            ...(suffixText ? { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 } : {}),
+                            ...(resolvedInputProps.style ?? {})
+                        }, maxLength: props.maxLength, readOnly: props.readOnly, disabled: props.enabled === false, inputMode: props.textInputType ?? resolvedInputProps.inputMode, ...resolvedInputProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }), 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: 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] }), _jsxs("div", { className: "mt-1 flex items-center justify-between gap-2", children: [_jsx(ErrorText, { message: props.error ?? internalError ?? undefined }), props.showCharCounter ? (_jsxs("span", { className: "text-[11px] text-foreground/50", children: [valueLength, props.maxLength ? `/${props.maxLength}` : ""] })) : null] })] }));
+}
+export function SgInputText(props) {
+    const { control, name, register, rules, ...rest } = props;
+    if (name && register) {
+        const reg = register(name, rules);
+        return (_jsx(SgInputTextBase, { ...rest, inputProps: {
+                ...rest.inputProps,
+                name,
+                onChange: (event) => {
+                    reg.onChange(event);
+                    rest.inputProps?.onChange?.(event);
+                },
+                onBlur: (event) => {
+                    reg.onBlur(event);
+                    rest.inputProps?.onBlur?.(event);
+                },
+                ref: mergeRefs(reg.ref, rest.inputProps?.ref)
+            } }));
+    }
+    if (control && name) {
+        const prefixText = rest.prefixText ?? "";
+        const suffixText = rest.suffixText ?? "";
+        const normalizeValue = (value) => {
+            if (value == null)
+                return "";
+            let text = String(value);
+            if (prefixText && text.startsWith(prefixText)) {
+                text = text.slice(prefixText.length);
+            }
+            if (suffixText && text.endsWith(suffixText)) {
+                text = text.slice(0, -suffixText.length);
+            }
+            return text;
+        };
+        const toFieldValue = (raw) => {
+            if (!raw)
+                return "";
+            return `${prefixText}${raw}${suffixText}`;
+        };
+        return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgInputTextBase, { ...rest, error: rest.error ?? fieldState.error?.message, inputProps: mergeInputPropsWithField(rest.inputProps, field, { normalizeValue, toFieldValue }) })) }));
+    }
+    return _jsx(SgInputTextBase, { ...rest });
+}
+function wordCount(value) {
+    return value.trim().split(/\s+/).filter(Boolean).length;
+}

package/dist/inputs/SgInputTextArea.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import type { RhfFieldProps } from "../rhf";
+export type SgInputTextAreaProps = {
+    id: string;
+    label?: string;
+    labelText?: string;
+    hintText?: string;
+    error?: string;
+    className?: string;
+    labelClassName?: string;
+    textareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+    maxLength?: number;
+    maxLengthMessage?: string;
+    maxLines?: number;
+    minLines?: number;
+    minLinesMessage?: string;
+    minLength?: number;
+    minLengthMessage?: string;
+    minNumberOfWords?: number;
+    minNumberOfWordsMessage?: string;
+    required?: boolean;
+    requiredMessage?: string;
+    prefixIcon?: React.ReactNode;
+    width?: number | string;
+    height?: number | string;
+    clearButton?: boolean;
+    filled?: boolean;
+    enabled?: boolean;
+    showCharCounter?: boolean;
+    onEnter?: () => void;
+    onExit?: () => void;
+    onChange?: (value: string) => void;
+    onClear?: () => void;
+    withBorder?: boolean;
+    borderRadius?: number | string;
+    validation?: (value: string) => string | null;
+    validateOnBlur?: boolean;
+    onValidation?: (message: string | null) => void;
+} & RhfFieldProps;
+export declare function SgInputTextArea(props: Readonly<SgInputTextAreaProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgInputTextArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgInputTextArea.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputTextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD,GAAG,aAAa,CAAC;AA+QlB,wBAAgB,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,2CAwBpE"}