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

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

import { Text } from "../text/text.js";
import { Mark } from "../mark/mark.js";
import { useHighlight } from "./use-highlight.js";
import { Fragment } from "react";
import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";

//#region src/components/highlight/highlight.tsx
/**
* `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.
*
* @see https://yamada-ui.com/docs/components/highlight
*/
const Highlight = ({ children: text, fragment = false, query, markProps,...rest }) => {
	const chunks = useHighlight({
		query,
		text
	});
	const { colorScheme } = rest;
	if (fragment) return /* @__PURE__ */ jsx(Fragment$1, { children: chunks.map(({ match, text: text$1 }, index) => match ? /* @__PURE__ */ jsx(Mark, {
		colorScheme,
		...markProps,
		children: text$1
	}, index) : /* @__PURE__ */ jsx(Fragment, { children: text$1 }, index)) });
	else return /* @__PURE__ */ jsx(Text, {
		...rest,
		children: chunks.map(({ match, text: text$1 }, index) => match ? /* @__PURE__ */ jsx(Mark, {
			colorScheme,
			...markProps,
			children: text$1
		}, index) : /* @__PURE__ */ jsx(Fragment, { children: text$1 }, index))
	});
};

//#endregion
export { Highlight };
//# sourceMappingURL=highlight.js.map