@compositive/components-controls/dist/TextField.js

Compositive component library including form controls.

import { jsx } from 'react/jsx-runtime';
import { useSurface, ColorConsumer, Input } from '@compositive/foundation';
import { useState, useCallback } from 'react';

const TextField = ({ onChange, onChangeText, value, onFocus, onBlur, defaultValue, sx, }) => {
    // TODO: The surface props should be inferred from the theme
    const TextFieldSurface = useSurface($TextField.surface);
    const [isFocused, setFocused] = useState(false);
    const onFocusCallback = useCallback((e) => {
        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
        setFocused(true);
    }, [onFocus]);
    const onBlurCallback = useCallback((e) => {
        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
        setFocused(false);
    }, [onBlur]);
    return (jsx(TextFieldSurface, { focused: isFocused, sx: sx, children: jsx(ColorConsumer, { children: ({ foreground }) => (jsx(Input, { value: value, defaultValue: defaultValue, onChange: onChange, onChangeText: onChangeText, onFocus: onFocusCallback, onBlur: onBlurCallback, sx: foreground })) }) }));
};
const $TextField = {
    surface: [Symbol("TextField"), "textField", "default"],
};

export { $TextField, TextField };
//# sourceMappingURL=TextField.js.map