import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
import { Chip } from '../chip/chip.js';
import styles from './input-field.module.css.js';

// Todo: Add a dropdown and chip support
const inputWrapper = cva(styles.inputWrapper, {
    variants: {
        size: {
            small: styles["size-small"],
            large: styles["size-large"],
        }
    },
    defaultVariants: {
        size: "large",
    }
});
const InputField = ({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible = 2, ref, size, ...props }) => {
    return (jsxRuntimeExports.jsxs("div", { className: styles.container, style: { width: width || '100%' }, children: [label && (jsxRuntimeExports.jsxs("label", { className: clsx(styles.label, disabled && styles["label-disabled"]), children: [label, optional && jsxRuntimeExports.jsx("span", { className: styles.optional, children: "(optional)" })] })), jsxRuntimeExports.jsxs("div", { className: clsx(inputWrapper({ size, className }), chips?.length && styles['has-chips']), children: [leadingIcon && jsxRuntimeExports.jsx("span", { className: styles['leading-icon'], children: leadingIcon }), prefix && jsxRuntimeExports.jsx("span", { className: styles.prefix, children: prefix }), jsxRuntimeExports.jsxs("div", { className: styles['chip-input-container'], children: [chips?.slice(0, maxChipsVisible).map((chip, index) => (jsxRuntimeExports.jsx(Chip, { variant: "outline", isDismissible: !!chip.onRemove, onDismiss: chip.onRemove, className: styles.chip, children: chip.label }, index))), chips && chips.length > maxChipsVisible && (jsxRuntimeExports.jsxs("span", { className: styles['chip-overflow'], children: ["+", chips.length - maxChipsVisible] })), jsxRuntimeExports.jsx("input", { ref: ref, className: clsx(styles['input-field'], leadingIcon && styles['has-leading-icon'], trailingIcon && styles['has-trailing-icon'], prefix && styles['has-prefix'], suffix && styles['has-suffix'], error && styles['input-error'], disabled && styles['input-disabled'], className), "aria-invalid": !!error, placeholder: placeholder, disabled: disabled, ...props })] }), suffix && jsxRuntimeExports.jsx("span", { className: styles.suffix, children: suffix }), trailingIcon && jsxRuntimeExports.jsx("span", { className: styles['trailing-icon'], children: trailingIcon })] }), (error || helperText) && (jsxRuntimeExports.jsx("span", { className: clsx(styles['helper-text'], error && styles['helper-text-error'], disabled && styles['helper-text-disabled']), children: error || helperText }))] }));
};
InputField.displayName = "InputField";

export { InputField };
//# sourceMappingURL=input-field.js.map
