(function(o,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["react/jsx-runtime","react"],n):(o=typeof globalThis<"u"?globalThis:o||self,o.ColorPicker=n(o.jsxRuntime,o.React))})(this,function(o,n){"use strict";const $=180/Math.PI,L=e=>{const t=e%360;return t<0?360+t:t},N=({x:e,y:t},r)=>{const d=r.left+r.width/2,a=r.top+r.height/2;return Math.atan2(t-a,e-d)*$},f=()=>{};class j{constructor(t,r){this.active=!1,this.element=t,this.element.style.willChange="transform",this.initOptions(r),this.updateCSS(),this.bindHandlers(),this.addListeners()}get angle(){return this._angle}set angle(t){this._angle!==t&&(this._angle=L(t),this.updateCSS())}initOptions(t){t=t||{},this.onRotate=t.onRotate||f,this.onDragStart=t.onDragStart||f,this.onDragStop=t.onDragStop||f,this._angle=t.angle||0}bindHandlers(){this.onRotationStart=this.onRotationStart.bind(this),this.onRotated=this.onRotated.bind(this),this.onRotationStop=this.onRotationStop.bind(this)}addListeners(){this.element.addEventListener("touchstart",this.onRotationStart,{passive:!0}),document.addEventListener("touchmove",this.onRotated,{passive:!1}),document.addEventListener("touchend",this.onRotationStop,{passive:!0}),document.addEventListener("touchcancel",this.onRotationStop,{passive:!0}),this.element.addEventListener("mousedown",this.onRotationStart,{passive:!0}),document.addEventListener("mousemove",this.onRotated,{passive:!1}),document.addEventListener("mouseup",this.onRotationStop,{passive:!0}),document.addEventListener("mouseleave",this.onRotationStop,{passive:!1})}removeListeners(){this.element.removeEventListener("touchstart",this.onRotationStart),document.removeEventListener("touchmove",this.onRotated),document.removeEventListener("touchend",this.onRotationStop),document.removeEventListener("touchcancel",this.onRotationStop),this.element.removeEventListener("mousedown",this.onRotationStart),document.removeEventListener("mousemove",this.onRotated),document.removeEventListener("mouseup",this.onRotationStop),document.removeEventListener("mouseleave",this.onRotationStop)}destroy(){this.onRotationStop(),this.removeListeners()}onRotationStart(t){(t.type==="touchstart"||t.button===0)&&(this.active=!0,this.onDragStart(t),this.setAngleFromEvent(t))}onRotationStop(){this.active&&(this.active=!1,this.onDragStop()),this.active=!1}onRotated(t){this.active&&(t.preventDefault(),this.setAngleFromEvent(t))}setAngleFromEvent(t){const r=t.targetTouches?t.targetTouches[0]:t,d=N({x:r.clientX,y:r.clientY},this.element.getBoundingClientRect());this._angle=L(d+90),this.updateCSS(),this.onRotate(this._angle)}updateCSS(){this.element.style.transform="rotate("+this._angle+"deg)"}}const p=()=>{},T=["red","yellow","green","cyan","blue","magenta","red"],w={ArrowUp:(e,t)=>e+t,ArrowRight:(e,t)=>e+t,ArrowDown:(e,t)=>e-t,ArrowLeft:(e,t)=>e-t,PageUp:(e,t)=>e+t*10,PageDown:(e,t)=>e-t*10,Home:()=>0,End:()=>359};return({hue:e=0,saturation:t=100,luminosity:r=50,alpha:d=1,disabled:a=!1,step:g=1,variant:H="collapsible",initiallyCollapsed:y=!1,mouseScroll:_=!1,ariaLabelColorWell:F="color well",onInput:v=p,onChange:S=p,onSelect:K=p,className:M,...O})=>{const h=n.useRef(null),D=n.useRef(null),l=n.useRef(null),i=n.useRef(e),[U,V]=n.useState(e),[u,b]=n.useState(!y),[R,E]=n.useState(!y),[m,x]=n.useState(!1),[q,k]=n.useState(!1),[B,A]=n.useState(!1);n.useEffect(()=>(_&&h.current.addEventListener("wheel",C),l.current=new j(h.current,{angle:i.current,onRotate(s){i.current=s,v(s)},onDragStart(){A(!0)},onDragStop(){A(!1),S(i.current)}}),()=>{l.current.destroy(),l.current=null,_&&h.current.removeEventListener("wheel",C)}),[]),n.useEffect(()=>{i.current=e,l.current.angle=e},[e]);const C=s=>{if(m||!u)return;s.preventDefault();const c=s.deltaY>0?l.current.angle+g:l.current.angle-g;l.current.angle=c,i.current=c,v(c),S(c)},Y=s=>{s.key==="Enter"&&s.target===D.current&&P()},z=s=>{if(a||m||!u||!(s.key in w))return;s.preventDefault();const c=w[s.key](l.current.angle,g);l.current.angle=c,i.current=c,v(c),S(c)},P=()=>{x(!0),R&&u?(K(i.current),k(!0)):E(!0)},G=()=>{H!=="persistent"&&(u?b(!1):(b(!0),E(!0))),k(!1),x(!1)},X=()=>{u||E(!1)},I=`hsla(${i.current}, ${t}%, ${r}%, ${d})`,J=["rcp",M,B&&"dragging",a&&"disabled"].filter(Boolean).join(" ");return o.jsxs("div",{"aria-roledescription":"radial slider","aria-label":"color picker","aria-valuetext":T[Math.round(i.current/60)],...O,"aria-expanded":R,"aria-valuenow":i.current,"aria-disabled":a,"aria-valuemin":0,"aria-valuemax":359,ref:D,role:"slider",className:J,tabIndex:a?-1:0,onKeyUp:Y,onKeyDown:z,children:[o.jsx("div",{className:`rcp__palette ${R?"in":"out"}`,children:o.jsx("canvas",{})}),o.jsx("div",{ref:h,className:"rcp__rotator",style:{pointerEvents:a||m||!u?"none":null,transform:`rotate(${U}deg)`},children:o.jsx("div",{className:`rcp__knob ${u?"in":"out"}`,onTransitionEnd:X})}),o.jsx("div",{className:`rcp__ripple ${q?"rippling":""}`.trim(),style:{borderColor:I}}),o.jsx("button",{type:"button",className:`rcp__well ${m?"pressed":""}`.trim(),style:{backgroundColor:I},"aria-label":F,disabled:a,tabIndex:a?-1:0,onAnimationEnd:G,onClick:P})]})}});
//# sourceMappingURL=react-color-picker.umd.cjs.map