@yamada-ui/react/dist/esm/components/color-swatch/color-swatch.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 { colorSwatchStyle } from "./color-swatch.style.js";
import { jsx, jsxs } from "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 } = createSlotComponent("color-swatch", 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__ */ jsxs(styled.div, {
		"aria-label": (0, utils_exports.isString)(color) ? color : void 0,
		"aria-roledescription": "color swatch",
		role: "img",
		...rest,
		children: [children, layers.map((props, index) => /* @__PURE__ */ jsx(ColorSwatchOverlay, { ...props }, index))]
	});
}, "root")();
const ColorSwatchOverlay = withContext("div", "overlay")();

//#endregion
export { ColorSwatch, ColorSwatchPropsContext, checkersProps, useColorSwatchPropsContext };
//# sourceMappingURL=color-swatch.js.map