react-colorify/dist/index.umd.cjs

A compact gradient and color picker library optimized for React, offering a fast and lag-free color selection experience with highly customizable options.

'use client';
"use strict";var e=require("react"),r=require("react-dom"),t=require("react/jsx-runtime");function o(){return(o=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}function n(e,r){if(null==e)return{};var t,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)r.indexOf(t=a[o])>=0||(n[t]=e[t]);return n}function a(r){var t=e.useRef(r),o=e.useRef((function(e){t.current&&t.current(e)}));return t.current=r,o.current}!function(e,r){void 0===r&&(r={});var t=r.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".react-colorify-absolute{position:absolute}.react-colorify-z-100{z-index:100}.react-colorify .absolute{position:absolute}.react-colorify .unset{all:unset}.react-colorify .relative{position:relative}.react-colorify .z-50{z-index:50}.react-colorify button{cursor:pointer}.react-colorify .col-span-2{grid-column:span 2/span 2}.react-colorify .float-right{float:right}.react-colorify .mx-auto{margin-left:auto;margin-right:auto}.react-colorify .my-auto{margin-bottom:auto;margin-top:auto}.react-colorify .mb-2{margin-bottom:.5rem}.react-colorify .mb-3{margin-bottom:.75rem}.react-colorify .mt-3{margin-top:.75rem}.react-colorify .flex{display:flex}.react-colorify .size-4{width:1rem}.react-colorify .h-4,.react-colorify .size-4{height:1rem}.react-colorify .h-6{height:1.5rem}.react-colorify .w-1\\/2{width:50%}.react-colorify .w-4{width:1rem}.react-colorify .w-6{width:1.5rem}.react-colorify .w-full{width:100%}.react-colorify .flex-1{flex:1 1 0%}.react-colorify .cursor-pointer{cursor:pointer}.react-colorify .items-center{align-items:center}.react-colorify .justify-center{justify-content:center}.react-colorify .justify-between{justify-content:space-between}.react-colorify .gap-1{gap:.25rem}.react-colorify .rounded{border-radius:.25rem}.react-colorify .rounded-md{border-radius:.375rem}.react-colorify .rounded-sm{border-radius:.125rem}.react-colorify .rounded-r-none{border-bottom-right-radius:0;border-top-right-radius:0}.react-colorify .border{border:1px solid #d1d4d9}.react-colorify .border-color-200{border-color:#ced0d3}.react-colorify .border-b-2{border-bottom-width:2px}.react-colorify .border-none{border-style:none}.react-colorify .bg-slate-200{background-color:#e2e8f0}.react-colorify .bg-slate-300{background-color:#cbd5e1}.react-colorify .bg-transparent{background-color:transparent}.react-colorify .bg-white{background-color:#fff}.react-colorify .p-2{padding:.5rem}.react-colorify .p-4{padding:1rem}.react-colorify .px-3{padding-left:.75rem;padding-right:.75rem}.react-colorify .py-1{padding-bottom:.25rem;padding-top:.25rem}.react-colorify .py-2{padding-bottom:.5rem;padding-top:.5rem}.react-colorify .pt-4{padding-top:1rem}.react-colorify .text-left{text-align:left}.react-colorify .text-center{text-align:center}.react-colorify .text-sm{font-size:.875rem;line-height:1.25rem}.react-colorify .font-medium{font-weight:500}.react-colorify .font-semibold{font-weight:600}.react-colorify .uppercase{text-transform:uppercase}.react-colorify .text-gray-500{color:#6b7280}.react-colorify .text-gray-600{color:#4b5563}.react-colorify .shadow-md{box-shadow:0 0 transparent,0 0 transparent,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.react-colorify .outline-none{outline:2px solid transparent;outline-offset:2px}.react-colorful{height:200px!important;width:240px!important}.react-colorful__saturation{border-bottom:0 solid #000!important}.react-colorful>div>div>.react-colorful__pointer{height:18px!important;width:18px!important}.react-colorful>.react-colorful__alpha,.react-colorful>.react-colorful__hue{border-radius:.5rem!important;height:6px;margin-top:1rem}.react-colorful>.react-colorful__alpha{margin-bottom:.5rem}.react-colorful__pointer-fill{background-color:#000!important}.modal{opacity:1;transition:opacity .3s ease,visibility .3s ease;visibility:visible}.modal-hidden{opacity:0;visibility:hidden}");var c=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},l=function(e){return"touches"in e},i=function(e){return e&&e.ownerDocument.defaultView||self},s=function(e,r,t){var o=e.getBoundingClientRect(),n=l(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return{left:c((n.pageX-(o.left+i(e).pageXOffset))/o.width),top:c((n.pageY-(o.top+i(e).pageYOffset))/o.height)}},u=function(e){!l(e)&&e.preventDefault()},f=e.memo((function(r){var t=r.onMove,c=r.onKey,f=n(r,["onMove","onKey"]),d=e.useRef(null),p=a(t),m=a(c),h=e.useRef(null),g=e.useRef(!1),b=e.useMemo((function(){var e=function(e){u(e),(l(e)?e.touches.length>0:e.buttons>0)&&d.current?p(s(d.current,e,h.current)):t(!1)},r=function(){return t(!1)};function t(t){var o=g.current,n=i(d.current),a=t?n.addEventListener:n.removeEventListener;a(o?"touchmove":"mousemove",e),a(o?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,o=d.current;if(o&&(u(r),!function(e,r){return r&&!l(e)}(r,g.current)&&o)){if(l(r)){g.current=!0;var n=r.changedTouches||[];n.length&&(h.current=n[0].identifier)}o.focus(),p(s(o,r,h.current)),t(!0)}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),m({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},t]}),[m,p]),v=b[0],y=b[1],x=b[2];return e.useEffect((function(){return x}),[x]),e.createElement("div",o({},f,{onTouchStart:v,onMouseDown:v,className:"react-colorful__interactive",ref:d,onKeyDown:y,tabIndex:0,role:"slider"}))})),d=function(e){return e.filter(Boolean).join(" ")},p=function(r){var t=r.color,o=r.left,n=r.top,a=void 0===n?.5:n,c=d(["react-colorful__pointer",r.className]);return e.createElement("div",{className:c,style:{top:100*a+"%",left:100*o+"%"}},e.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},m=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},h=function(e){return"#"===e[0]&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?m(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?m(parseInt(e.substring(6,8),16)/255,2):1}},g=function(e){var r=e.s,t=e.v,o=e.a,n=(200-r)*t/100;return{h:m(e.h),s:m(n>0&&n<200?r*t/100/(n<=100?n:200-n)*100:0),l:m(n/2),a:m(o,2)}},b=function(e){var r=g(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},v=function(e){var r=g(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},y=function(e){var r=e.h,t=e.s,o=e.v,n=e.a;r=r/360*6,t/=100,o/=100;var a=Math.floor(r),c=o*(1-t),l=o*(1-(r-a)*t),i=o*(1-(1-r+a)*t),s=a%6;return{r:m(255*[o,l,c,c,i,o][s]),g:m(255*[i,o,o,l,c,c][s]),b:m(255*[c,c,i,o,o,l][s]),a:m(n,2)}},x=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},w=function(e){var r=e.r,t=e.g,o=e.b,n=e.a,a=n<1?x(m(255*n)):"";return"#"+x(r)+x(t)+x(o)+a},_=function(e){var r=e.r,t=e.g,o=e.b,n=e.a,a=Math.max(r,t,o),c=a-Math.min(r,t,o),l=c?a===r?(t-o)/c:a===t?2+(o-r)/c:4+(r-t)/c:0;return{h:m(60*(l<0?l+6:l)),s:m(a?c/a*100:0),v:m(a/255*100),a:n}},j=e.memo((function(r){var t=r.hue,o=r.onChange,n=d(["react-colorful__hue",r.className]);return e.createElement("div",{className:n},e.createElement(f,{onMove:function(e){o({h:360*e.left})},onKey:function(e){o({h:c(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuenow":m(t),"aria-valuemax":"360","aria-valuemin":"0"},e.createElement(p,{className:"react-colorful__hue-pointer",left:t/360,color:b({h:t,s:100,v:100,a:1})})))})),E=e.memo((function(r){var t=r.hsva,o=r.onChange,n={backgroundColor:b({h:t.h,s:100,v:100,a:1})};return e.createElement("div",{className:"react-colorful__saturation",style:n},e.createElement(f,{onMove:function(e){o({s:100*e.left,v:100-100*e.top})},onKey:function(e){o({s:c(t.s+100*e.left,0,100),v:c(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+m(t.s)+"%, Brightness "+m(t.v)+"%"},e.createElement(p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:b(t)})))})),N=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0};function k(r,t,o){var n=a(o),c=e.useState((function(){return r.toHsva(t)})),l=c[0],i=c[1],s=e.useRef({color:t,hsva:l});e.useEffect((function(){if(!r.equal(t,s.current.color)){var e=r.toHsva(t);s.current={hsva:e,color:t},i(e)}}),[t,r]),e.useEffect((function(){var e;N(l,s.current.hsva)||r.equal(e=r.fromHsva(l),s.current.color)||(s.current={hsva:l,color:e},n(e))}),[l,r,n]);var u=e.useCallback((function(e){i((function(r){return Object.assign({},r,e)}))}),[]);return[l,u]}var C="undefined"!=typeof window?e.useLayoutEffect:e.useEffect,M=new Map,z=function(e){C((function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!M.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',M.set(r,t);var o="undefined"!=typeof __webpack_nonce__?__webpack_nonce__:void 0;o&&t.setAttribute("nonce",o),r.head.appendChild(t)}}),[])},I=function(r){var t=r.className,o=r.hsva,n=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+v(Object.assign({},o,{a:0}))+", "+v(Object.assign({},o,{a:1}))+")"},l=d(["react-colorful__alpha",t]),i=m(100*o.a);return e.createElement("div",{className:l},e.createElement("div",{className:"react-colorful__alpha-gradient",style:a}),e.createElement(f,{onMove:function(e){n({a:e.left})},onKey:function(e){n({a:c(o.a+e.left)})},"aria-label":"Alpha","aria-valuetext":i+"%","aria-valuenow":i,"aria-valuemin":"0","aria-valuemax":"100"},e.createElement(p,{className:"react-colorful__alpha-pointer",left:o.a,color:v(o)})))},L=function(r){var t=r.className,a=r.colorModel,c=r.color,l=void 0===c?a.defaultColor:c,i=r.onChange,s=n(r,["className","colorModel","color","onChange"]),u=e.useRef(null);z(u);var f=k(a,l,i),p=f[0],m=f[1],h=d(["react-colorful",t]);return e.createElement("div",o({},s,{ref:u,className:h}),e.createElement(E,{hsva:p,onChange:m}),e.createElement(j,{hue:p.h,onChange:m}),e.createElement(I,{hsva:p,onChange:m,className:"react-colorful__last-control"}))},R={defaultColor:"0001",toHsva:function(e){return _(h(e))},fromHsva:function(e){return w(y(e))},equal:function(e,r){return e.toLowerCase()===r.toLowerCase()||N(h(e),h(r))}},$=function(r){return e.createElement(L,o({},r,{colorModel:R}))};const S=({children:e})=>document.body?r.createPortal(t.jsx(t.Fragment,{children:e}),document.body):null,O=e=>Math.max(0,Math.min(255,e)),H=e=>e.toString(16).padStart(2,"0"),F=(e,r,t=!0)=>{const{r:o,g:n,b:a,a:c}=((e,r=1)=>{if(3===(e=e.replace("#","")).length&&(e=e.split("").map((e=>e+e)).join("")),![6,8].includes(e.length))return{r:0,g:0,b:0,a:r};const t=parseInt(e.slice(0,6),16),o=t>>16&255,n=t>>8&255,a=255&t;return 8===e.length&&(r=parseInt(e.slice(6,8),16)/255),{r:o,g:n,b:a,a:r}})(e);if(t)return{backgroundColor:`rgba(${O(o+r)}, ${O(n+r)}, ${O(a+r)}, ${c})`};{const e=O(o+r),t=O(n+r),l=O(a+r),i=c;return`#${H(e)}${H(t)}${H(l)}${H(Math.round(255*i))}`}};module.exports=({defaultValue:r="#ffffff",onChange:o,className:n="",labelFor:a})=>{const c=e.useRef(null),l=e.useRef(null),i=e.useRef(null),[s,u]=e.useState(!1),[f,d]=e.useState("transparent"===r?"#ffffff00":r),[p,m]=e.useState({top:0,left:0}),h=e.useRef("transparent"===r?"#ffffff00":r),g=e=>{d(e),o&&o(e)};e.useEffect((()=>{if(!a)return;const e=document.querySelector(`label[for="${a}"]`),r=()=>{l.current&&l.current.click()};return e&&e.addEventListener("click",r),()=>{e&&e.removeEventListener("click",r)}}),[a]);const b=e.useCallback((()=>{s&&l.current&&((()=>{if(l.current){const e=l.current.getBoundingClientRect(),r=e.top>=0&&e.bottom<=window.innerHeight&&e.left>=0&&e.right<=window.innerWidth;return new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting||u(!1)}))})).observe(l.current),r}return!1})()?requestAnimationFrame((()=>{const e=l.current.getBoundingClientRect(),r=e.top+window.scrollY;m(r>=200?{top:e.bottom+window.scrollY,left:e.left+window.scrollX+e.width/2-127}:{top:e.top+window.scrollY+20,left:e.left+window.scrollX+e.width/2-127})})):u(!1))}),[s]),v=e=>{c.current&&!c.current.contains(e.target)&&l.current&&!l.current.contains(e.target)&&i.current&&!i.current.contains(e.target)&&u(!1)},[y,x]=e.useState(!1);e.useEffect((()=>{f.length>7&&f.endsWith("00")?x(!0):x(!1)}),[f]),e.useEffect((()=>(s?(document.addEventListener("mousedown",v),window.addEventListener("scroll",b,!0)):(document.removeEventListener("mousedown",v),window.removeEventListener("scroll",b,!0)),()=>{document.removeEventListener("mousedown",v),window.removeEventListener("scroll",b,!0)})),[s,b]),e.useEffect((()=>{const e=new ResizeObserver((()=>b()));return l.current&&e.observe(l.current),()=>{l.current&&e.unobserve(l.current)}}),[b]);return t.jsx("div",{className:"react-colorify",children:t.jsxs("div",{ref:c,children:[t.jsx("div",{className:`unset relative flex items-center justify-center mx-auto h-6 w-6 rounded colorify-picker ${n}`,"aria-label":"Open color picker",onClick:()=>{s||b(),u(!s)},ref:l,id:a,style:{border:y?"1px solid #000":"1px solid #d1d5db",background:y?"linear-gradient(to top left,\n             rgba(0,0,0,0) 0%,\n             rgba(0,0,0,0) calc(50% - 0.8px),\n             rgba(0,0,0,1) 50%,\n             rgba(0,0,0,0) calc(50% + 0.8px),\n             rgba(0,0,0,0) 100%)":f,opacity:y?.2:1}}),s&&t.jsx(S,{children:t.jsx("div",{className:"react-colorify colorify-modal react-colorify-z-100 z-100 absolute react-colorify-absolute",style:{top:p.top+20,left:p.left},ref:i,children:t.jsxs("div",{className:"z-50 rounded-md border bg-white p-4 shadow-md",children:[t.jsxs("div",{className:"picker",children:[t.jsx($,{color:f,onChange:g}),t.jsxs("div",{className:"bg-muted col-span-2 mb-3 mt-3 flex w-full flex-1 gap-1 rounded-md text-center uppercase",children:[t.jsxs("div",{className:"flex w-1/2 gap-1 rounded-md bg-slate-200 p-2 font-medium",children:[t.jsx("div",{className:"h-6 w-6 rounded-md border border-gray-600",style:{backgroundColor:f}}),t.jsx("input",{type:"text",size:7,value:f,onChange:e=>{const r=e.target.value;if(r.length<=9){/^#([0-9A-F]{3}){1,2}$/i.test(r)||/^#([0-9A-F]{4}){1,2}$/i.test(r)?g(r):d(r)}else d(h.current)},className:"my-auto flex-1 text-left text-sm uppercase text-gray-500 bg-transparent border-none outline-none w-full"})]}),t.jsx("div",{className:"flex w-1/2 gap-1 rounded-md bg-slate-200 p-2 font-medium",children:t.jsxs("p",{className:"my-auto flex-1 text-left text-sm uppercase text-gray-500",children:[t.jsx("input",{type:"number",value:Math.round(parseInt(f.slice(7,9)||"FF",16)/255*100),onChange:e=>{let r=Math.round(parseInt(f.slice(7,9)||"FF",16)/255*100);const t=parseInt(e.target.value);if(t>=0&&t<=100){r=t;const e=Math.round(r/100*255).toString(16).padStart(2,"0"),o=f.slice(0,7)+e;g(o)}},step:"1",min:"0",max:"100",className:"[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none my-auto w-16 text-left text-sm uppercase text-gray-500 bg-transparent border-none outline-none"}),t.jsx("span",{className:"float-right",children:"%"})]})})]}),t.jsx("div",{className:"border-b-2"}),t.jsx("div",{className:"mt-3 flex justify-between gap-1",children:[...Array(10)].map(((e,r)=>t.jsx("button",{onClick:()=>{g(F(f,10*r,!1))},"aria-label":`Increment color ${r}`,className:"unset h-4 w-4 cursor-pointer rounded-sm border border-color-200",style:F(f,10*r)},`increment-${r}`)))}),t.jsx("div",{className:"mt-3 flex justify-between gap-1",children:[...Array(10)].map(((e,r)=>t.jsx("button",{onClick:()=>{g(F(f,-(10*r),!1))},"aria-label":`Decrement color ${r}`,className:"unset h-4 w-4 cursor-pointer rounded-sm border",style:F(f,10*-r)},`decrement-${r}`)))})]}),t.jsxs("button",{onClick:()=>{d(h.current),o&&o(h.current),u(!1)},className:"unset cursor-pointer mx-auto flex items-center gap-1 pt-4 text-sm font-semibold",type:"button",children:[t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2.5,stroke:"currentColor",className:"size-4",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"})}),"Reset Color"]})]})})})]})})};
//# sourceMappingURL=index.umd.cjs.map