shelving/ui/form/Input.js

Toolkit for using data in JavaScript.

import { jsx as _jsx } from "react/jsx-runtime";
import { LOADING } from "../misc/Loading.js";
import { getFlexClass } from "../style/Flex.js";
import { getClass } from "../util/css.js";
import INPUT_CSS from "./Input.module.css";
// Classes.
export const RADIO_CLASS = INPUT_CSS.radio;
export const CHECKBOX_CLASS = INPUT_CSS.radio;
export const INPUT_CLASS = INPUT_CSS.input;
export const PLACEHOLDER_CLASS = INPUT_CSS.placeholder;
export const EMPTY_OPTION_CLASS = INPUT_CSS.empty;
export const VALUE_OPTION_CLASS = INPUT_CSS.value;
// Precomposed classes.
export const TEXT_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.text);
export const MULTILINE_TEXT_INPUT_CLASS = getClass(TEXT_INPUT_CLASS, INPUT_CSS.multiline);
export const WRAPPER_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.wrapper);
export const SELECT_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.select);
export const BUTTON_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.button);
export const LABEL_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.label);
/** Input that is loading. */
export const LOADING_INPUT = _jsx("div", { className: getClass(INPUT_CLASS, getFlexClass({})), children: LOADING });
/**
 * Wraps an input with support for absolutely-positioned `data-slot` icon elements on either side.
 * - This is so you can put an icon before or after an input.
 */
export function InputWrapper({ children }) {
    return _jsx("div", { className: WRAPPER_INPUT_CLASS, children: children });
}