@uiw/react-color-saturation/esm/Pointer.js

Color Saturation

import React from 'react';
import { useMemo } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
export var Pointer = _ref => {
  var {
    className,
    color,
    left,
    top,
    prefixCls
  } = _ref;
  var style = {
    position: 'absolute',
    top,
    left
  };
  var stylePointer = {
    '--saturation-pointer-box-shadow': 'rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px',
    width: 6,
    height: 6,
    transform: 'translate(-3px, -3px)',
    boxShadow: 'var(--saturation-pointer-box-shadow)',
    borderRadius: '50%',
    backgroundColor: color
  };
  return useMemo(() => /*#__PURE__*/_jsx("div", {
    className: prefixCls + "-pointer " + (className || ''),
    style: style,
    children: /*#__PURE__*/_jsx("div", {
      className: prefixCls + "-fill",
      style: stylePointer
    })
  }), [top, left, color, className, prefixCls]);
};