@reservoir0x/relay-kit-ui/_cjs/src/components/primitives/Input.js

Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Flex_js_1 = tslib_1.__importDefault(require("./Flex.js"));
const css_1 = require("@reservoir0x/relay-design-system/css");
const Box_js_1 = tslib_1.__importDefault(require("./Box.js"));
const StyledInputCss = (0, css_1.cva)({
    base: {
        px: 16,
        py: 12,
        borderRadius: 'input-border-radius',
        fontFamily: 'body',
        fontSize: 16,
        color: 'input-color',
        backgroundColor: 'input-background',
        _placeholder: {
            color: 'gray10'
        },
        '--focusColor': 'colors.focus-color',
        _focus: {
            boxShadow: 'inset 0 0 0 2px var(--focusColor)',
            outline: 'none'
        },
        _disabled: {
            cursor: 'not-allowed'
        },
        _spinButtons: {
            WebkitAppearance: 'none'
        }
    },
    variants: {
        size: {
            large: {
                fontSize: 32,
                lineHeight: '42px'
            }
        },
        ellipsify: {
            true: {
                textOverflow: 'ellipsis',
                overflow: 'hidden',
                whiteSpace: 'nowrap'
            }
        }
    }
});
const Input = (0, react_1.forwardRef)(({ children, icon, iconPosition, iconCss, containerCss, css, ...props }, ref) => {
    const { size, ellipsify, ...inputProps } = props;
    return ((0, jsx_runtime_1.jsxs)(Flex_js_1.default, { css: {
            ...containerCss
        }, style: { ...props.style }, children: [icon && ((0, jsx_runtime_1.jsx)(Flex_js_1.default, { css: { position: 'relative' }, children: (0, jsx_runtime_1.jsx)(Box_js_1.default, { css: {
                        position: 'absolute',
                        top: 12,
                        left: iconPosition === 'right' ? 'unset' : 16,
                        right: iconPosition === 'right' ? 16 : 'unset',
                        zIndex: 0,
                        ...iconCss
                    }, children: icon }) })), (0, jsx_runtime_1.jsx)("input", { ...inputProps, type: "text", ref: ref, style: {
                    paddingLeft: icon && iconPosition !== 'right' ? 42 : 16,
                    paddingRight: icon && iconPosition === 'right' ? 42 : 16
                }, className: (0, css_1.css)(StyledInputCss.raw({ size, ellipsify }), css_1.css.raw({
                    ...css
                })) })] }));
});
Input.displayName = 'Input';
exports.default = Input;
//# sourceMappingURL=Input.js.map