@mantine/core/cjs/components/Input/InputWrapper/InputWrapper.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_factory = require("../../../core/factory/factory.cjs");
const require_Box = require("../../../core/Box/Box.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_get_input_offsets = require("./get-input-offsets/get-input-offsets.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Input/InputWrapper/InputWrapper.tsx
const defaultProps = {
	labelElement: "label",
	inputContainer: (children) => children,
	inputWrapperOrder: [
		"label",
		"description",
		"input",
		"error"
	]
};
const varsResolver = require_create_vars_resolver.createVarsResolver((_, { size }) => ({
	label: {
		"--input-label-size": require_get_size.getFontSize(size),
		"--input-asterisk-color": void 0
	},
	error: { "--input-error-size": size === void 0 ? void 0 : `calc(${require_get_size.getFontSize(size)} - ${require_rem.rem(2)})` },
	description: { "--input-description-size": size === void 0 ? void 0 : `calc(${require_get_size.getFontSize(size)} - ${require_rem.rem(2)})` }
}));
const InputWrapper = require_factory.factory((_props) => {
	const props = require_use_props.useProps("InputWrapper", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, size, variant, __staticSelector, inputContainer, inputWrapperOrder, label, error, description, labelProps, descriptionProps, errorProps, labelElement, children, withAsterisk, id, required, __stylesApiProps, mod, attributes, ...others } = props;
	const getStyles = require_use_styles.useStyles({
		name: ["InputWrapper", __staticSelector],
		props: __stylesApiProps || props,
		classes: require_Input_module.default,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const sharedProps = {
		size,
		variant,
		__staticSelector
	};
	const idBase = (0, _mantine_hooks.useId)(id);
	const isRequired = typeof withAsterisk === "boolean" ? withAsterisk : required;
	const errorId = errorProps?.id || `${idBase}-error`;
	const descriptionId = descriptionProps?.id || `${idBase}-description`;
	const inputId = idBase;
	const hasError = !!error && typeof error !== "boolean";
	const hasDescription = !!description;
	const _describedBy = `${hasError ? errorId : ""} ${hasDescription ? descriptionId : ""}`;
	const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : void 0;
	const labelId = labelProps?.id || `${idBase}-label`;
	const _label = label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.InputLabel, {
		labelElement,
		id: labelId,
		htmlFor: inputId,
		required: isRequired,
		...sharedProps,
		...labelProps,
		children: label
	}, "label");
	const _description = hasDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputDescription.InputDescription, {
		...descriptionProps,
		...sharedProps,
		size: descriptionProps?.size || sharedProps.size,
		id: descriptionProps?.id || descriptionId,
		children: description
	}, "description");
	const _input = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: inputContainer(children) }, "input");
	const _error = hasError && /* @__PURE__ */ (0, react.createElement)(require_InputError.InputError, {
		...errorProps,
		...sharedProps,
		size: errorProps?.size || sharedProps.size,
		key: "error",
		id: errorProps?.id || errorId
	}, error);
	const content = inputWrapperOrder.map((part) => {
		switch (part) {
			case "label": return _label;
			case "input": return _input;
			case "description": return _description;
			case "error": return _error;
			default: return null;
		}
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputWrapper_context.InputWrapperContext, {
		value: {
			getStyles,
			describedBy,
			inputId,
			labelId,
			...require_get_input_offsets.getInputOffsets(inputWrapperOrder, {
				hasDescription,
				hasError
			})
		},
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
			variant,
			size,
			mod: [{ error: !!error }, mod],
			id: labelElement === "label" ? void 0 : id,
			...getStyles("root"),
			...others,
			children: content
		})
	});
});
InputWrapper.classes = require_Input_module.default;
InputWrapper.varsResolver = varsResolver;
InputWrapper.displayName = "@mantine/core/InputWrapper";
//#endregion
exports.InputWrapper = InputWrapper;

//# sourceMappingURL=InputWrapper.cjs.map