@mantine/core/cjs/components/Pill/Pill.cjs

React components library focused on usability, accessibility and developer experience

"use client";
require("../../_virtual/_rolldown/runtime.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_CloseButton = require("../CloseButton/CloseButton.cjs");
const require_PillsInput_context = require("../PillsInput/PillsInput.context.cjs");
const require_Pill_module = require("./Pill.module.cjs");
const require_PillGroup = require("./PillGroup/PillGroup.cjs");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Pill/Pill.tsx
const defaultProps = { variant: "default" };
const varsResolver = require_create_vars_resolver.createVarsResolver((_, { radius }, { size }) => ({ root: {
	"--pill-fz": require_get_size.getSize(size, "pill-fz"),
	"--pill-height": require_get_size.getSize(size, "pill-height"),
	"--pill-radius": radius === void 0 ? void 0 : require_get_size.getRadius(radius)
} }));
const Pill = require_factory.factory((_props) => {
	const props = require_use_props.useProps("Pill", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, variant, children, withRemoveButton, onRemove, removeButtonProps, radius, size, disabled, mod, attributes, ...others } = props;
	const ctx = (0, react.use)(require_PillGroup.PillGroupContext);
	const pillsInputCtx = (0, react.use)(require_PillsInput_context.PillsInputContext);
	const _size = size || ctx?.size || void 0;
	const _variant = pillsInputCtx?.variant === "filled" ? "contrast" : variant || "default";
	const getStyles = require_use_styles.useStyles({
		name: "Pill",
		classes: require_Pill_module.default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver,
		stylesCtx: { size: _size }
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
		component: "span",
		variant: _variant,
		size: _size,
		...getStyles("root", { variant: _variant }),
		mod: [{
			"with-remove": withRemoveButton && !disabled,
			disabled: disabled || ctx?.disabled
		}, mod],
		...others,
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
			...getStyles("label"),
			children
		}), withRemoveButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CloseButton.CloseButton, {
			variant: "transparent",
			radius,
			tabIndex: -1,
			"aria-hidden": true,
			unstyled,
			...removeButtonProps,
			...getStyles("remove", {
				className: removeButtonProps?.className,
				style: removeButtonProps?.style
			}),
			onMouseDown: (event) => {
				event.preventDefault();
				event.stopPropagation();
				removeButtonProps?.onMouseDown?.(event);
			},
			onClick: (event) => {
				event.stopPropagation();
				onRemove?.();
				removeButtonProps?.onClick?.(event);
			}
		})]
	});
});
Pill.classes = require_Pill_module.default;
Pill.varsResolver = varsResolver;
Pill.displayName = "@mantine/core/Pill";
Pill.Group = require_PillGroup.PillGroup;
//#endregion
exports.Pill = Pill;

//# sourceMappingURL=Pill.cjs.map