v3.0.14

Author: hxf31891

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-best-gradient-color-picker",
-  "version": "3.0.13",
+  "version": "3.0.14",
   "description": "An easy to use color/gradient picker for React.js",
   "type": "module",
   "sideEffects": [
@@ -14,24 +14,22 @@
     ".": {
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
-    },
-    "./dist/Calendar.css": "./dist/Picker.css"
+    }
   },
   "scripts": {
-    "build": "yarn build-js && yarn copy-styles",
+    "build": "yarn build-js",
     "build-js": "yarn build-js-esm && yarn build-js-cjs && yarn build-js-cjs-package",
     "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm",
     "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs --moduleResolution node --verbatimModuleSyntax false",
     "build-js-cjs-package": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
     "clean": "rimraf dist",
-    "copy-styles": "cpy 'src/**/*.css' dist",
     "format": "biome format",
     "lint": "biome lint",
     "prepack": "yarn clean && yarn build",
     "test": "yarn lint && yarn tsc && yarn format && yarn unit",
     "tsc": "tsc",
     "unit": "vitest",
-    "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & node --eval \"fs.watch('src', () => child_process.exec('yarn copy-styles'))\""
+    "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & node --eval"
   },
   "repository": {
     "type": "git",

src/Picker.css

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react'
+import { Styles, Config } from '../shared/types.js'
 import { getHandleValue } from '../utils/utils.js'
-import { Styles } from '../shared/types.js'
 import { usePicker } from '../context.js'
 import {
   usePaintSat,
@@ -13,6 +13,7 @@ const AdvBar = ({
   value,
   reffy,
   label,
+  config,
   callback,
   squareWidth,
   openAdvanced,
@@ -22,12 +23,14 @@ const AdvBar = ({
   reffy: any
   value: number
   label: string
+  config: Config
   squareWidth: number
   openAdvanced: boolean
   defaultStyles: Styles
   pickerIdSuffix: string
   callback: (arg0: number) => void
 }) => {
+  const { barSize } = config
   const [dragging, setDragging] = useState<boolean>(false)
   const [handleTop, setHandleTop] = useState<number>(2)
   const left = value * (squareWidth - 18)
@@ -42,13 +45,13 @@ const AdvBar = ({
 
   const handleMove = (e: any) => {
     if (dragging) {
-      callback(getHandleValue(e))
+      callback(getHandleValue(e, barSize))
     }
   }
 
   const handleClick = (e: any) => {
     if (!dragging) {
-      callback(getHandleValue(e))
+      callback(getHandleValue(e, barSize))
     }
   }
 
@@ -125,7 +128,7 @@ const AdvBar = ({
 }
 
 const AdvancedControls = ({ openAdvanced }: { openAdvanced: boolean }) => {
-  const { tinyColor, handleChange, squareWidth, hc, defaultStyles, pickerIdSuffix } = usePicker()
+  const { config, tinyColor, handleChange, squareWidth, hc, defaultStyles, pickerIdSuffix } = usePicker()
   const { s, l } = tinyColor.toHsl()
 
   const satRef = useRef(null)
@@ -180,15 +183,17 @@ const AdvancedControls = ({ openAdvanced }: { openAdvanced: boolean }) => {
         <AdvBar
           value={s}
           reffy={satRef}
-          callback={satDesat}
+          config={config}
           label="Saturation"
+          callback={satDesat}
           squareWidth={squareWidth}
           openAdvanced={openAdvanced}
           defaultStyles={defaultStyles}
           pickerIdSuffix={pickerIdSuffix}
         />
         <AdvBar
           value={l}
+          config={config}
           reffy={lightRef}
           label="Lightness"
           callback={setLight}
@@ -199,6 +204,7 @@ const AdvancedControls = ({ openAdvanced }: { openAdvanced: boolean }) => {
         />
         <AdvBar
           value={hc?.v}
+          config={config}
           reffy={brightRef}
           label="Brightness"
           callback={setBright}