@mantine/core/esm/components/Input/InputWrapper/InputWrapper.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { rem } from "../../../core/utils/units-converters/rem.mjs";
import { getFontSize } from "../../../core/utils/get-size/get-size.mjs";
import { createVarsResolver } from "../../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../../core/styles-api/use-styles/use-styles.mjs";
import { factory } from "../../../core/factory/factory.mjs";
import { Box } from "../../../core/Box/Box.mjs";
import { InputWrapperContext } from "../InputWrapper.context.mjs";
import Input_module_default from "../Input.module.mjs";
import { InputDescription } from "../InputDescription/InputDescription.mjs";
import { InputError } from "../InputError/InputError.mjs";
import { InputLabel } from "../InputLabel/InputLabel.mjs";
import { getInputOffsets } from "./get-input-offsets/get-input-offsets.mjs";
import { Fragment, createElement } from "react";
import { useId as useId$1 } from "@mantine/hooks";
import { jsx } from "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 = createVarsResolver((_, { size }) => ({
	label: {
		"--input-label-size": getFontSize(size),
		"--input-asterisk-color": void 0
	},
	error: { "--input-error-size": size === void 0 ? void 0 : `calc(${getFontSize(size)} - ${rem(2)})` },
	description: { "--input-description-size": size === void 0 ? void 0 : `calc(${getFontSize(size)} - ${rem(2)})` }
}));
const InputWrapper = factory((_props) => {
	const 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 = useStyles({
		name: ["InputWrapper", __staticSelector],
		props: __stylesApiProps || props,
		classes: Input_module_default,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const sharedProps = {
		size,
		variant,
		__staticSelector
	};
	const idBase = useId$1(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__ */ jsx(InputLabel, {
		labelElement,
		id: labelId,
		htmlFor: inputId,
		required: isRequired,
		...sharedProps,
		...labelProps,
		children: label
	}, "label");
	const _description = hasDescription && /* @__PURE__ */ jsx(InputDescription, {
		...descriptionProps,
		...sharedProps,
		size: descriptionProps?.size || sharedProps.size,
		id: descriptionProps?.id || descriptionId,
		children: description
	}, "description");
	const _input = /* @__PURE__ */ jsx(Fragment, { children: inputContainer(children) }, "input");
	const _error = hasError && /* @__PURE__ */ createElement(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__ */ jsx(InputWrapperContext, {
		value: {
			getStyles,
			describedBy,
			inputId,
			labelId,
			...getInputOffsets(inputWrapperOrder, {
				hasDescription,
				hasError
			})
		},
		children: /* @__PURE__ */ jsx(Box, {
			variant,
			size,
			mod: [{ error: !!error }, mod],
			id: labelElement === "label" ? void 0 : id,
			...getStyles("root"),
			...others,
			children: content
		})
	});
});
InputWrapper.classes = Input_module_default;
InputWrapper.varsResolver = varsResolver;
InputWrapper.displayName = "@mantine/core/InputWrapper";
//#endregion
export { InputWrapper };

//# sourceMappingURL=InputWrapper.mjs.map