seti-ramesesv1/dist/components/ui/Text.js

Reusable components and context for Next.js apps

import { jsxs, jsx } from 'react/jsx-runtime';
import { clsx } from '../../node_modules/clsx/dist/clsx.js';
import { useState } from 'react';
import styles from '../../styles/Text.module.css.js';

const Text = ({ label, name, value, defaultValue, onChange, placeholder, disabled = false, variant = "outlined", helperText, error, multiline, rows = 3, size = "md", fullWidth, textTransform = "none", startIcon, endIcon, onStartIconClick, onEndIconClick, ...rest }) => {
    const [internalValue, setInternalValue] = useState(defaultValue || "");
    const inputValue = value ?? internalValue ?? "";
    const hasValue = inputValue?.toString().trim().length > 0;
    const shouldFloatLabel = hasValue || !!placeholder || rest.type === "date";
    const handleChange = (e) => {
        let newValue = e.target.value;
        switch (textTransform) {
            case "uppercase":
                newValue = newValue.toUpperCase();
                break;
            case "lowercase":
                newValue = newValue.toLowerCase();
                break;
            case "capitalize":
                newValue = newValue.replace(/\b\w/g, (char) => char.toUpperCase());
                break;
        }
        if (onChange) {
            const transformedEvent = {
                ...e,
                target: {
                    ...e.target,
                    value: newValue,
                },
            };
            onChange(transformedEvent);
        }
        else {
            setInternalValue(newValue);
        }
    };
    const wrapperClass = clsx(styles.textfield, styles[variant], styles[size || "md"], {
        [styles.error]: error,
        [styles.disabled]: disabled,
        [styles.fullWidth]: fullWidth,
        [styles.hasStartIcon]: startIcon,
        [styles.hasEndIcon]: endIcon,
        [styles.hasValue]: hasValue,
        [styles.withHelperText]: !!helperText,
        [styles.hasPlaceholder]: shouldFloatLabel,
    });
    const transformClass = textTransform ? styles[`transform-${textTransform}`] : styles["transform-none"];
    return (jsxs("div", { className: wrapperClass, children: [startIcon && (jsx("button", { type: "button", className: clsx(styles.icon, styles.start), onClick: onStartIconClick, children: startIcon })), multiline ? (jsx("textarea", { id: name, name: name, disabled: disabled, readOnly: rest.readOnly, rows: rows, placeholder: placeholder || "", className: clsx(styles.input, transformClass), onChange: handleChange, ...(value != null ? { value: inputValue } : { defaultValue: defaultValue ?? "" }), ...rest })) : (jsx("input", { id: name, name: name, disabled: disabled, placeholder: placeholder || "", className: clsx(styles.input, transformClass), onChange: handleChange, ...(value != null ? { value: inputValue } : { defaultValue: defaultValue ?? "" }), ...rest })), endIcon && (jsx("button", { type: "button", className: clsx(styles.icon, styles.end), onClick: onEndIconClick, children: endIcon })), jsxs("label", { htmlFor: name, className: styles.label, children: [label, rest.required && jsx("span", { className: styles.required, children: "*" })] }), helperText && jsx("p", { className: styles.helperText, children: helperText })] }));
};

export { Text, Text as default };
//# sourceMappingURL=Text.js.map