@yamada-ui/react/dist/esm/components/bleed/bleed.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 { varAttr } from "../../core/system/var.js";
import { createComponent } from "../../core/components/create-component.js";
import { bleedStyle } from "./bleed.style.js";

//#region src/components/bleed/bleed.tsx
const { PropsContext: BleedPropsContext, usePropsContext: useBleedPropsContext, withContext } = createComponent("bleed", bleedStyle);
/**
* `Bleed` is a component used to break an element from the boundaries of its container.
*
* @see https://yamada-ui.com/docs/components/bleed
*/
const Bleed = withContext("div")(void 0, ({ block, blockEnd, blockStart, inline, inlineEnd, inlineStart,...rest }) => {
	blockStart ??= block;
	blockEnd ??= block;
	inlineStart ??= inline;
	inlineEnd ??= inline;
	const inlineStartFull = inlineStart === "full";
	const inlineEndFull = inlineEnd === "full";
	const marginBlockStart = utils_exports.calc.negate("{block-start}");
	const marginBlockEnd = utils_exports.calc.negate("{block-end}");
	const marginInlineStart = inlineStartFull ? "calc(50% - 50vw)" : utils_exports.calc.negate("{inline-start}");
	const marginInlineEnd = inlineEndFull ? "calc(50% - 50vw)" : utils_exports.calc.negate("{inline-end}");
	return {
		...rest,
		"--block-end": varAttr(blockEnd, "spaces"),
		"--block-start": varAttr(blockStart, "spaces"),
		"--inline-end": varAttr(inlineEnd, "spaces"),
		"--inline-start": varAttr(inlineStart, "spaces"),
		marginBlockEnd,
		marginBlockStart,
		marginInlineEnd,
		marginInlineStart
	};
});

//#endregion
export { Bleed, BleedPropsContext, useBleedPropsContext };
//# sourceMappingURL=bleed.js.map