@hitachivantara/uikit-react-core/dist/ColorPicker/Swatch.js

UI Kit Core React components.

import { HvButtonBase } from "../ButtonBase/ButtonBase.js";
import { theme } from "@hitachivantara/uikit-styles";
import { createClasses, mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { jsx } from "react/jsx-runtime";
//#region src/ColorPicker/Swatch.tsx
var { useClasses } = createClasses("HvColorPickerSwatch", { root: {
	width: "32px",
	height: "32px",
	borderRadius: theme.radii.base,
	":focus": { boxShadow: `rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, var(--color) 0px 0px 4px` },
	"&,&:hover,&:focus-visible": { backgroundColor: "var(--color)" }
} });
var Swatch = (props) => {
	const { classes: classesProp, className, style, color, ...others } = useDefaultProps("HvColorPickerSwatch", props);
	const { classes, cx } = useClasses(classesProp);
	return /* @__PURE__ */ jsx(HvButtonBase, {
		title: color,
		style: mergeStyles(style, { "--color": color }),
		className: cx(classes.root, className),
		...others
	});
};
//#endregion
export { Swatch };