@yamada-ui/react/dist/esm/components/tag/tag.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { XIcon } from "../icon/icons/x-icon.js";
import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
import { useClickable } from "../../hooks/use-clickable/index.js";
import { tagStyle } from "./tag.style.js";
import { useMemo, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/tag/tag.tsx
const { ComponentContext, PropsContext: TagPropsContext, useComponentContext, usePropsContext: useTagPropsContext, withContext, withProvider } = createSlotComponent("tag", tagStyle);
/**
* `Tag` is a component used to categorize or organize items using keywords that describe them.
*
* @see https://yamada-ui.com/docs/components/tag
*/
const Tag = withProvider(({ children, disabled, endIcon, startIcon, closeButtonProps, contentProps, iconProps, onClose,...rest }) => {
	return /* @__PURE__ */ jsx(ComponentContext, {
		value: useMemo(() => ({ disabled }), [disabled]),
		children: /* @__PURE__ */ jsxs(styled.span, {
			"data-disabled": (0, utils_exports.dataAttr)(disabled),
			...rest,
			children: [
				startIcon ? /* @__PURE__ */ jsx(TagStartIcon, {
					...iconProps,
					children: startIcon
				}) : null,
				children ? /* @__PURE__ */ jsx(TagContent, {
					...contentProps,
					children
				}) : null,
				endIcon ? /* @__PURE__ */ jsx(TagEndIcon, {
					...iconProps,
					children: endIcon
				}) : null,
				onClose ? /* @__PURE__ */ jsx(TagCloseButton, {
					onClick: onClose,
					...closeButtonProps
				}) : null
			]
		})
	});
}, "root", { transferProps: ["disabled"] })();
const TagContent = withContext("span", "content")(void 0, (props) => {
	const { disabled } = useComponentContext();
	return {
		"data-disabled": (0, utils_exports.dataAttr)(disabled),
		...props
	};
});
const TagStartIcon = withContext("span", ["icon", "start"])(void 0, (props) => {
	const { disabled } = useComponentContext();
	return {
		"data-disabled": (0, utils_exports.dataAttr)(disabled),
		...props
	};
});
const TagEndIcon = withContext("span", ["icon", "end"])(void 0, (props) => {
	const { disabled } = useComponentContext();
	return {
		"data-disabled": (0, utils_exports.dataAttr)(disabled),
		...props
	};
});
const TagCloseButton = withContext("span", ["icon", "closeButton"])(void 0, ({ children,...props }) => {
	const ref = useRef(null);
	const { disabled } = useComponentContext();
	const rest = useClickable({
		ref,
		disabled,
		...props
	});
	const { t } = useI18n("tag");
	return {
		"aria-label": t("Close tag"),
		"data-disabled": (0, utils_exports.dataAttr)(disabled),
		children: children || /* @__PURE__ */ jsx(XIcon, {}),
		...rest
	};
});

//#endregion
export { Tag, TagPropsContext, useTagPropsContext };
//# sourceMappingURL=tag.js.map