"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { InfoCircledIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
import { cx, cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import { forwardRef } from 'react';
import { Tooltip } from '../tooltip/tooltip.js';
import { Chip } from '../chip/chip.js';
import styles from './input-field.module.css.js';

// Todo: Add a dropdown support
const inputWrapper = cva(styles.inputWrapper, {
    variants: {
        size: {
            small: styles['size-small'],
            large: styles['size-large']
        },
        variant: {
            default: styles['variant-default'],
            borderless: styles['variant-borderless']
        }
    },
    defaultVariants: {
        size: 'large',
        variant: 'default'
    }
});
const InputField = forwardRef(({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible = 2, size, infoTooltip, variant = 'default', ...props }, ref) => {
    return (jsxs("div", { className: styles.container, style: { width: width || '100%' }, children: [label && (jsxs("div", { className: styles.labelContainer, children: [jsxs("label", { className: cx(styles.label, disabled && styles['label-disabled']), children: [label, optional && jsx("span", { className: styles.optional, children: "(optional)" })] }), infoTooltip && (jsx(Tooltip, { message: infoTooltip, side: 'right', children: jsx("span", { className: styles.helpIcon, children: jsx(InfoCircledIcon, {}) }) }))] })), jsxs("div", { className: cx(inputWrapper({ size, variant, className }), error && styles['input-error-wrapper'], disabled && styles['input-disabled-wrapper'], chips?.length && styles['has-chips']), children: [leadingIcon && (jsx("div", { className: styles['leading-icon'], children: leadingIcon })), prefix && jsx("div", { className: styles.prefix, children: prefix }), jsxs("div", { className: styles['chip-input-container'], children: [chips?.slice(0, maxChipsVisible).map((chip, index) => (jsx(Chip, { variant: 'outline', isDismissible: !!chip.onRemove, onDismiss: chip.onRemove, className: styles.chip, children: chip.label }, index))), chips && chips.length > maxChipsVisible && (jsxs("span", { className: styles['chip-overflow'], children: ["+", chips.length - maxChipsVisible] })), jsx("input", { ref: ref, className: cx(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 && jsx("div", { className: styles.suffix, children: suffix }), trailingIcon && (jsx("div", { className: styles['trailing-icon'], children: trailingIcon }))] }), (error || helperText) && (jsx("span", { className: cx(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
