@yamada-ui/react/dist/cjs/components/color-swatch/color-swatch.cjs

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

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_color_swatch_style = require('./color-swatch.style.cjs');
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/color-swatch/color-swatch.tsx
const checkersProps = {
	bgImage: [
		"linear-gradient(45deg, {checkers-fg} 25%, transparent 25%)",
		"linear-gradient(-45deg, {checkers-fg} 25%, transparent 25%)",
		"linear-gradient(45deg, transparent 75%, {checkers-fg} 75%)",
		"linear-gradient(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)"
	].join(", "),
	bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,
	bgSize: `8px 8px`
};
const defaultLayers = (background, withShadow) => {
	const layers = [checkersProps, { background }];
	if (withShadow) layers.push({ boxShadow: "inner" });
	return layers;
};
const { PropsContext: ColorSwatchPropsContext, usePropsContext: useColorSwatchPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("color-swatch", require_color_swatch_style.colorSwatchStyle);
/**
* `ColorSwatch` is a component that displays color samples.
*
* @see https://yamada-ui.com/docs/components/color-swatch
*/
const ColorSwatch = withProvider(({ children, color = "#ffffff00", withShadow = true, layers = defaultLayers(color, withShadow),...rest }) => {
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
		"aria-label": (0, require_utils_index.utils_exports.isString)(color) ? color : void 0,
		"aria-roledescription": "color swatch",
		role: "img",
		...rest,
		children: [children, layers.map((props, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorSwatchOverlay, { ...props }, index))]
	});
}, "root")();
const ColorSwatchOverlay = withContext("div", "overlay")();

//#endregion
exports.ColorSwatch = ColorSwatch;
exports.ColorSwatchPropsContext = ColorSwatchPropsContext;
exports.checkersProps = checkersProps;
exports.useColorSwatchPropsContext = useColorSwatchPropsContext;
//# sourceMappingURL=color-swatch.cjs.map