react-color-strip/dist/index.js

🎨 A minimal horizontal color picker strip component for React with draggable pointer support.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react");function r(e,t,r){e/=360,r/=100;const n=(e,t,r)=>(r<0&&(r+=1),r>1&&(r-=1),r<1/6?e+6*(t-e)*r:r<.5?t:r<2/3?e+(t-e)*(2/3-r)*6:e);let a,o,s;if(0===(t/=100))a=o=s=r;else{const i=r<.5?r*(1+t):r+t-r*t,l=2*r-i;a=n(l,i,e+1/3),o=n(l,i,e),s=n(l,i,e-1/3)}return{r:Math.round(255*a),g:Math.round(255*o),b:Math.round(255*s)}}function n(e,t,r){e/=255,t/=255,r/=255;const n=Math.max(e,t,r),a=Math.min(e,t,r);let o=0,s=0;const i=(n+a)/2;if(n===a)o=s=0;else{const l=n-a;switch(s=i>.5?l/(2-n-a):l/(n+a),n){case e:o=(t-r)/l+(t<r?6:0);break;case t:o=(r-e)/l+2;break;case r:o=(e-t)/l+4}o/=6}return{h:Math.round(360*o),s:Math.round(100*s),l:Math.round(100*i)}}function a(e,t,r){const n=e=>{const t=Math.round(e).toString(16);return 1===t.length?"0"+t:t};return`#${n(e)}${n(t)}${n(r)}`}function o(e){const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}function s(e){const t=r(e,100,50);return{hex:a(t.r,t.g,t.b),rgb:t,hsl:{h:e,s:100,l:50}}}function i(e){const t=function(e){if(e.startsWith("#"))return o(e);const t=e.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);if(t)return{r:parseInt(t[1]),g:parseInt(t[2]),b:parseInt(t[3])};const n=e.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);if(n)return r(parseInt(n[1]),parseInt(n[2]),parseInt(n[3]));return null}(e);if(!t)return 0;return n(t.r,t.g,t.b).h}function l(e,t,r){const n=o(e),s=o(t);if(!n||!s)return e;return a(n.r+(s.r-n.r)*r,n.g+(s.g-n.g)*r,n.b+(s.b-n.b)*r)}!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".stripStyle {\r\n  position: relative;\r\n  display: inline-block;\r\n  border: 1px solid #D1D5DB;\r\n}\r\n\r\n.canvasStyle {\r\n  display: block;\r\n}\r\n\r\n.pointer {\r\n  position: absolute;\r\n  top: 50%;\r\n  transition: transform 0.15s ease-in-out;\r\n}");const c=({value:r="#000000ff",width:a=300,height:c=20,disabled:u=!1,pointer:f={},style:d={},customColor:h,rounded:p=0,onChange:b,onChangeComplete:g})=>{const{width:m=12,height:x=c,backgroundColor:v="white",border:y="none",borderRadius:M="2px",boxShadow:C="0 4px 6px -1px rgba(0, 0, 0, 0.1)",scaleOnDrag:w=!0,dragScale:S=1.1}=f,k=t.useRef(null),D=t.useRef(null),[I,R]=t.useState(!1),[$,E]=t.useState(()=>i(r)),[B,j]=t.useState(()=>h?.5:i(r)/360);t.useEffect(()=>{const e=D.current;if(!e)return;const t=e.getContext("2d");if(!t)return;e.width=a,e.height=c;const r=t.createLinearGradient(0,0,a,0);if(h)r.addColorStop(0,"#ffffff"),r.addColorStop(.5,h),r.addColorStop(1,"#000000");else for(let e=0;e<=360;e+=30){const t=e%360;r.addColorStop(e/360,`hsl(${t}, 100%, 50%)`)}t.fillStyle=r,t.fillRect(0,0,a,c)},[a,c,h]),t.useEffect(()=>{h&&j(.5)},[h]),t.useEffect(()=>{if(!h){const e=i(r);E(e),j(e/360)}},[r,h]);const P=e=>{const t=Math.max(0,Math.min(1,e/a));if(h){const e=.5,r=t<e?l("#ffffff",h,t/e):l(h,"#000000",(t-e)/e),a=o(r);return{hex:r,rgb:a,hsl:n(a.r,a.g,a.b)}}return s(360*t)},A={left:`${h?B*a:$/360*a}px`,width:`${m}px`,height:`${x}px`,backgroundColor:v,border:y,borderRadius:M,boxShadow:C,transform:["translate(-50%, -50%)",I&&w?`scale(${S})`:null].filter(Boolean).join(" "),pointerEvents:"none",opacity:u?"0.5":""},N={opacity:u?"0.5":"",cursor:u?"not-allowed":I?"grabbing":"grab",borderRadius:p};return e.jsxs("div",{ref:k,className:"stripStyle",style:{width:a,height:c,...N,...d},onPointerDown:e=>{if(u)return;e.preventDefault(),R(!0);const t=k.current?.getBoundingClientRect();if(!t)return;const r=e.clientX-t.left,n=Math.max(0,Math.min(1,r/a));j(n);const o=P(r);h||E(o.hsl.h),b?.(o),e.target.setPointerCapture(e.pointerId)},onPointerMove:e=>{if(!I||u)return;e.preventDefault();const t=k.current?.getBoundingClientRect();if(!t)return;const r=e.clientX-t.left,n=Math.max(0,Math.min(1,r/a));j(n);const o=P(r);h||E(o.hsl.h),b?.(o)},onPointerUp:e=>{if(!I)return;R(!1);const t=k.current?.getBoundingClientRect();if(!t)return;const r=e.clientX-t.left,n=Math.max(0,Math.min(1,r/a));j(n);const o=P(r);h||E(o.hsl.h),g?.(o),e.target.releasePointerCapture(e.pointerId)},onKeyDown:e=>{if(!u)if(h){let t=B;switch(e.key){case"ArrowLeft":e.preventDefault(),t=Math.max(0,B-.01);break;case"ArrowRight":e.preventDefault(),t=Math.min(1,B+.01);break;case"Home":e.preventDefault(),t=0;break;case"End":e.preventDefault(),t=1;break;default:return}j(t);const r=.5,a=t<r?l("#ffffff",h,t/r):l(h,"#000000",(t-r)/r),s=o(a),i={hex:a,rgb:s,hsl:n(s.r,s.g,s.b)};b?.(i),g?.(i)}else{let t=$;switch(e.key){case"ArrowLeft":e.preventDefault(),t=Math.max(0,$-1);break;case"ArrowRight":e.preventDefault(),t=Math.min(360,$+1);break;case"Home":e.preventDefault(),t=0;break;case"End":e.preventDefault(),t=360;break;default:return}const r=s(t);E(t),b?.(r),g?.(r)}},tabIndex:u?-1:0,role:"slider","aria-label":"Color hue selector","aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":$,"aria-disabled":u,children:[e.jsx("canvas",{ref:D,className:"canvasStyle",style:{width:"100%",height:"100%",borderRadius:p}}),e.jsx("div",{className:"pointer",style:A})]})};exports.ColorStrip=c,exports.default=c;
//# sourceMappingURL=index.js.map