@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
44 lines (40 loc) • 1.91 kB
JavaScript
"use client";
const require_utils_index = require('../../utils/index.cjs');
const require_var = require('../../core/system/var.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_bleed_style = require('./bleed.style.cjs');
//#region src/components/bleed/bleed.tsx
const { PropsContext: BleedPropsContext, usePropsContext: useBleedPropsContext, withContext } = require_create_component.createComponent("bleed", require_bleed_style.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 = require_utils_index.utils_exports.calc.negate("{block-start}");
const marginBlockEnd = require_utils_index.utils_exports.calc.negate("{block-end}");
const marginInlineStart = inlineStartFull ? "calc(50% - 50vw)" : require_utils_index.utils_exports.calc.negate("{inline-start}");
const marginInlineEnd = inlineEndFull ? "calc(50% - 50vw)" : require_utils_index.utils_exports.calc.negate("{inline-end}");
return {
...rest,
"--block-end": require_var.varAttr(blockEnd, "spaces"),
"--block-start": require_var.varAttr(blockStart, "spaces"),
"--inline-end": require_var.varAttr(inlineEnd, "spaces"),
"--inline-start": require_var.varAttr(inlineStart, "spaces"),
marginBlockEnd,
marginBlockStart,
marginInlineEnd,
marginInlineStart
};
});
//#endregion
exports.Bleed = Bleed;
exports.BleedPropsContext = BleedPropsContext;
exports.useBleedPropsContext = useBleedPropsContext;
//# sourceMappingURL=bleed.cjs.map