@mantine/core/esm/components/Pill/Pill.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { getRadius, getSize } 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 { CloseButton } from "../CloseButton/CloseButton.mjs";
import { PillsInputContext } from "../PillsInput/PillsInput.context.mjs";
import Pill_module_default from "./Pill.module.mjs";
import { PillGroup, PillGroupContext } from "./PillGroup/PillGroup.mjs";
import { use } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Pill/Pill.tsx
const defaultProps = { variant: "default" };
const varsResolver = createVarsResolver((_, { radius }, { size }) => ({ root: {
	"--pill-fz": getSize(size, "pill-fz"),
	"--pill-height": getSize(size, "pill-height"),
	"--pill-radius": radius === void 0 ? void 0 : getRadius(radius)
} }));
const Pill = factory((_props) => {
	const 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 = use(PillGroupContext);
	const pillsInputCtx = use(PillsInputContext);
	const _size = size || ctx?.size || void 0;
	const _variant = pillsInputCtx?.variant === "filled" ? "contrast" : variant || "default";
	const getStyles = useStyles({
		name: "Pill",
		classes: Pill_module_default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver,
		stylesCtx: { size: _size }
	});
	return /* @__PURE__ */ jsxs(Box, {
		component: "span",
		variant: _variant,
		size: _size,
		...getStyles("root", { variant: _variant }),
		mod: [{
			"with-remove": withRemoveButton && !disabled,
			disabled: disabled || ctx?.disabled
		}, mod],
		...others,
		children: [/* @__PURE__ */ jsx("span", {
			...getStyles("label"),
			children
		}), withRemoveButton && /* @__PURE__ */ jsx(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 = Pill_module_default;
Pill.varsResolver = varsResolver;
Pill.displayName = "@mantine/core/Pill";
Pill.Group = PillGroup;
//#endregion
export { Pill };

//# sourceMappingURL=Pill.mjs.map