'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { parseNumber } from '@graphprotocol/gds-utils';
import { useControlled, useGDS } from "../hooks/index.js";
import { cn, splitProps } from "../utils/index.js";
import { renderAddon } from "./base/Addon.js";
import { Field } from "./base/Field.js";
import { Render } from "./base/Render.js";
export function Input({ type = 'text', size, label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, description, placeholder, name, value: controlledValue, defaultValue, onChange, min, max, maxLength, disabled = false, readOnly = false, status, message, addon, unit, action, className, renderInput, ...props }) {
    useGDS();
    const { rootProps, nestedProps } = splitProps(props);
    const [value, setValue] = useControlled(controlledValue, defaultValue ?? '', onChange);
    return (_jsx(Field, { size: size, label: label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, description: description, placeholder: placeholder, name: name, value: value, maxLength: maxLength, disabled: disabled || (readOnly ? 'read-only' : false), status: status, message: message, className: cn('gds-input', className), ...rootProps, renderInput: (renderProps, { inputProps: fieldInputProps }) => {
            const typeProps = type === 'number'
                ? {
                    /**
                     * Using `type="text"` instead of `type="number"` because the latter doesn't allow
                     * us to format the number, and the value can unexpectedly change on mouse wheel
                     * (see https://github.com/facebook/react/issues/32156).
                     */
                    type: 'text',
                    // Show the right keyboard on mobile
                    inputMode: type === 'number' ? 'decimal' : undefined,
                    // Restore accessibility semantics of `type="number"`
                    role: 'spinbutton',
                    'aria-valuenow': parseNumber(value) ?? undefined,
                    'aria-valuemin': min !== undefined ? (parseNumber(String(min)) ?? undefined) : undefined,
                    'aria-valuemax': max !== undefined ? (parseNumber(String(max)) ?? undefined) : undefined,
                }
                : {
                    type,
                    min,
                    max,
                };
            const inputProps = {
                ...fieldInputProps,
                ...typeProps,
                'data-has-addon': Boolean(addon) || undefined,
                onChange: (event) => {
                    setValue(event.target.value);
                },
                className: cn(fieldInputProps.className, 
                /**
                 * The `w-0` and `flex-1` classes are to work around `input` having a default but
                 * useless intrinsic width. When `field-sizing` is supported everywhere, we should
                 * switch to that.
                 */
                `w-0 min-w-16 flex-1
            data-has-addon:ps-(--height)
            @prop-size-small/field:px-2
            @prop-size-medium/field:px-3
            @prop-size-large/field:px-3`),
                ...nestedProps,
            };
            const decoratedInput = (_jsxs("div", { className: `
              flex h-(--height)
              @prop-size-small/field:[--height:--spacing(8)]
              @prop-size-medium/field:[--height:--spacing(10)]
              @prop-size-large/field:[--height:--spacing(12)]
            `, children: [_jsx("input", { ...inputProps }), addon ? (_jsx("div", { className: `
                  gds-addon pointer-events-none absolute start-0 top-0
                  root-flex aspect-square h-full items-center justify-center text-form-placeholder
                  u:@prop-size-small/field:addon-small
                  u:@prop-size-medium/field:addon-medium
                  u:@prop-size-large/field:addon-medium
                `, children: renderAddon(addon) })) : null, unit || action ? (_jsxs("div", { className: "flex shrink-0 items-center", children: [unit ? (_jsx("div", { className: `
                      cursor-default text-10 text-caption text-form-placeholder transition
                      @state-disabled/field:text-form-disabled
                      @prop-size-small/field:pe-2
                      @prop-size-medium/field:pe-2.5
                      @prop-size-large/field:pe-3
                    `, children: unit })) : null, action ? (_jsx("div", { className: `
                      **:button:default-variant-tertiary
                      @prop-size-small/field:pe-0.5
                      @prop-size-small/field:**:button:var-[radius=var(--radius-4)]
                      @prop-size-small/field:**:button-group:var-[gap=--spacing(0.5)]
                      @prop-size-medium/field:pe-1.5
                      @prop-size-large/field:pe-2
                      @prop-size-small/field:**:button-or-group:prop-size-xsmall
                      @prop-size-medium/field:**:button-or-group:prop-size-xsmall
                      @prop-size-large/field:**:button-or-group:prop-size-small
                    `, children: action })) : null] })) : null] }));
            return (_jsx(Render, { render: renderInput ?? _jsx(Field.Box, { children: decoratedInput }), state: {
                    inputProps,
                    decoratedInput,
                }, ...renderProps }));
        } }));
}
//# sourceMappingURL=Input.js.map