@mantine/core/cjs/components/Input/Input.cjs

React components library focused on usability, accessibility and developer experience

"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_rem = require("../../core/utils/units-converters/rem.cjs");
const require_get_size = require("../../core/utils/get-size/get-size.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_extract_style_props = require("../../core/Box/style-props/extract-style-props/extract-style-props.cjs");
const require_polymorphic_factory = require("../../core/factory/polymorphic-factory.cjs");
const require_Box = require("../../core/Box/Box.cjs");
const require_Loader = require("../Loader/Loader.cjs");
const require_Input_context = require("./Input.context.cjs");
const require_InputClearButton = require("./InputClearButton/InputClearButton.cjs");
const require_InputClearSection = require("./InputClearSection/InputClearSection.cjs");
const require_InputWrapper_context = require("./InputWrapper.context.cjs");
const require_Input_module = require("./Input.module.cjs");
const require_InputDescription = require("./InputDescription/InputDescription.cjs");
const require_InputError = require("./InputError/InputError.cjs");
const require_InputLabel = require("./InputLabel/InputLabel.cjs");
const require_InputPlaceholder = require("./InputPlaceholder/InputPlaceholder.cjs");
const require_InputWrapper = require("./InputWrapper/InputWrapper.cjs");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Input/Input.tsx
const defaultProps = {
	variant: "default",
	leftSectionPointerEvents: "none",
	rightSectionPointerEvents: "none",
	withAria: true,
	withErrorStyles: true,
	size: "sm",
	loading: false,
	loadingPosition: "right"
};
const varsResolver = require_create_vars_resolver.createVarsResolver((_, props, ctx) => ({ wrapper: {
	"--input-margin-top": ctx.offsetTop ? "calc(var(--mantine-spacing-xs) / 2)" : void 0,
	"--input-margin-bottom": ctx.offsetBottom ? "calc(var(--mantine-spacing-xs) / 2)" : void 0,
	"--input-height": require_get_size.getSize(props.size, "input-height"),
	"--input-fz": require_get_size.getFontSize(props.size),
	"--input-radius": props.radius === void 0 ? void 0 : require_get_size.getRadius(props.radius),
	"--input-left-section-width": props.leftSectionWidth !== void 0 ? require_rem.rem(props.leftSectionWidth) : void 0,
	"--input-right-section-width": props.rightSectionWidth !== void 0 ? require_rem.rem(props.rightSectionWidth) : void 0,
	"--input-padding-y": props.multiline ? require_get_size.getSize(props.size, "input-padding-y") : void 0,
	"--input-left-section-pointer-events": props.leftSectionPointerEvents,
	"--input-right-section-pointer-events": props.rightSectionPointerEvents
} }));
const Input = require_polymorphic_factory.polymorphicFactory((_props) => {
	const props = require_use_props.useProps("Input", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, required, __staticSelector, __stylesApiProps, size, wrapperProps, error, disabled, leftSection, leftSectionProps, leftSectionWidth, rightSection, rightSectionProps, rightSectionWidth, rightSectionPointerEvents, leftSectionPointerEvents, variant, vars, pointer, multiline, radius, id, withAria, withErrorStyles, mod, inputSize, attributes, __clearSection, __clearable, __clearSectionMode, __defaultRightSection, loading, loadingPosition, ...others } = props;
	const { styleProps, rest } = require_extract_style_props.extractStyleProps(others);
	const ctx = (0, react.use)(require_InputWrapper_context.InputWrapperContext);
	const stylesCtx = {
		offsetBottom: ctx?.offsetBottom,
		offsetTop: ctx?.offsetTop
	};
	const getStyles = require_use_styles.useStyles({
		name: ["Input", __staticSelector],
		props: __stylesApiProps || props,
		classes: require_Input_module.default,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		stylesCtx,
		rootSelector: "wrapper",
		vars,
		varsResolver
	});
	const ariaAttributes = withAria ? {
		required,
		disabled,
		"aria-invalid": !!error,
		"aria-describedby": ctx?.describedBy,
		id: ctx?.inputId || id
	} : {};
	const loadingIndicator = loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Loader.Loader, { size: loadingPosition === "left" ? "calc(var(--input-left-section-size) / 2)" : "calc(var(--input-right-section-size) / 2)" }) : null;
	const _leftSection = loading && loadingPosition === "left" ? loadingIndicator : leftSection;
	const _rightSection = require_InputClearSection.InputClearSection({
		__clearable,
		__clearSection,
		rightSection: loading && loadingPosition === "right" ? loadingIndicator : rightSection,
		__defaultRightSection,
		size,
		__clearSectionMode
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input_context.InputContext, {
		value: { size: size || "sm" },
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
			...getStyles("wrapper"),
			...styleProps,
			...wrapperProps,
			mod: [{
				error: !!error && withErrorStyles,
				pointer,
				disabled,
				multiline,
				"data-with-right-section": !!_rightSection,
				"data-with-left-section": !!_leftSection
			}, mod],
			variant,
			size,
			children: [
				_leftSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					...leftSectionProps,
					"data-position": "left",
					...getStyles("section", {
						className: leftSectionProps?.className,
						style: leftSectionProps?.style
					}),
					children: _leftSection
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
					component: "input",
					...rest,
					...ariaAttributes,
					required,
					mod: {
						disabled,
						error: !!error && withErrorStyles
					},
					variant,
					__size: inputSize,
					...getStyles("input")
				}),
				_rightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					...rightSectionProps,
					"data-position": "right",
					...getStyles("section", {
						className: rightSectionProps?.className,
						style: rightSectionProps?.style
					}),
					children: _rightSection
				})
			]
		})
	});
});
Input.classes = require_Input_module.default;
Input.varsResolver = varsResolver;
Input.Wrapper = require_InputWrapper.InputWrapper;
Input.Label = require_InputLabel.InputLabel;
Input.Error = require_InputError.InputError;
Input.Description = require_InputDescription.InputDescription;
Input.Placeholder = require_InputPlaceholder.InputPlaceholder;
Input.ClearButton = require_InputClearButton.InputClearButton;
Input.displayName = "@mantine/core/Input";
//#endregion
exports.Input = Input;

//# sourceMappingURL=Input.cjs.map