huebert 1.0.0 → 1.0.1

package/dist/index.js

@@ -1 +1 @@
-import{convertHsvToRgb as S,convertRgbToHsv as D,parseHex as p,serializeHex as X,serializeHex8 as R}from"culori/fn";import{useEffect as F,useMemo as E,useState as Z}from"react";import{useRef as T}from"react";var Y=(e,t=0,g=1)=>Math.min(g,Math.max(e,t)),q=(e)=>{let t=e.currentTarget.getBoundingClientRect();return{pctX:Y((e.clientX-t.left)/t.width),pctY:Y((e.clientY-t.top)/t.height)}},v=(e)=>{let t=T(!1);return{onPointerDown:(i)=>{i.currentTarget.setPointerCapture(i.pointerId),t.current=!0,e(q(i))},onPointerMove:(i)=>{if(!t.current)return;e(q(i))},onPointerUp:(i)=>{i.currentTarget.releasePointerCapture(i.pointerId),t.current=!1}}};import{jsxDEV as H}from"react/jsx-dev-runtime";var k=({updateDrag:e,alpha:t=1})=>{let g=v(e);return H("div",{className:"AlphaPicker",...g,children:H("div",{style:{left:`${Math.round(t*100)}%`}},void 0,!1,void 0,this)},void 0,!1,void 0,this)},J=k;import{jsxDEV as K}from"react/jsx-dev-runtime";var z=({updateDrag:e,h:t=0})=>{let g=v(e);return K("div",{className:"HuePicker",...g,children:K("div",{style:{left:`${t/3.6}%`}},void 0,!1,void 0,this)},void 0,!1,void 0,this)},O=z;import{jsxDEV as Q}from"react/jsx-dev-runtime";var G=({updateDrag:e,s:t,v:g})=>{let m=v(e);return Q("div",{className:"SVPicker",...m,children:Q("div",{style:{left:`${Math.round(t*100)}%`,top:`${Math.round((1-g)*100)}%`}},void 0,!1,void 0,this)},void 0,!1,void 0,this)},W=G;import{jsxDEV as P}from"react/jsx-dev-runtime";var mn=({color:e,onChange:t,swatches:g=[],alpha:m=!1,perf:y=!1})=>{let[i,r]=Z(D(p(e))),[$,I]=Z(!1),N=E(()=>m?R:X,[m]),U=(n)=>N(S(n)),u=U(i);F(()=>{if($&&y)return;let n=p(e);if(u!==N(n))r(D(n))},[u,e,$,y,N]);let M=(n)=>{if(r(n),y&&$)return;t(U(n))},_=({pctX:n,pctY:d})=>M({...i,s:n,v:1-d}),A=({pctX:n})=>M({...i,h:n*360%360}),B=({pctX:n})=>M({...i,alpha:n}),L=(n)=>{let d=p(n.currentTarget.value);if(d!==void 0){let b=D(d);M(b)}else n.currentTarget.blur(),n.currentTarget.value=u};return P("div",{className:"Huebert",style:{"--sat-color":`hsl(${i.h??0} 100% 50%)`,"--opaque-color":u.slice(0,7)},children:[P("div",{style:{display:"contents"},onPointerDownCapture:()=>I(!0),onPointerUpCapture:()=>{if(I(!1),y)t(u)},children:[P(W,{updateDrag:_,s:i.s,v:i.v},void 0,!1,void 0,this),P(O,{updateDrag:A,h:i.h},void 0,!1,void 0,this),m&&P(J,{updateDrag:B,alpha:i.alpha},void 0,!1,void 0,this)]},void 0,!0,void 0,this),P("input",{className:"HuebertInput",onBlur:L,onKeyDown:(n)=>{if(n.key==="Enter")L(n)},defaultValue:u},u,!1,void 0,this),g.length>0&&P("div",{className:"HuebertSwatches",children:g.map((n,d)=>P("button",{className:"HuebertSwatch",style:{background:n},onClick:()=>{let b=D(p(n)),f={mode:"hsv",h:i.h,s:b.s,v:b.v};if(m)f.alpha=1;if(b.v>0&&b.s>0)f.h=b.h;M(f)}},d,!1,void 0,this))},void 0,!1,void 0,this)]},void 0,!0,void 0,this)};export{mn as ColorPicker};
+import{convertHsvToRgb as G,convertRgbToHsv as M,parseHex as E,serializeHex as S,serializeHex8 as X}from"culori/fn";import{useEffect as R,useMemo as F,useState as W}from"react";import{useRef as T}from"react";var L=(e,t=0,D=1)=>Math.min(D,Math.max(e,t)),Y=(e)=>{let t=e.currentTarget.getBoundingClientRect();return{pctX:L((e.clientX-t.left)/t.width),pctY:L((e.clientY-t.top)/t.height)}},m=(e)=>{let t=T(!1);return{onPointerDown:(i)=>{i.currentTarget.setPointerCapture(i.pointerId),t.current=!0,e(Y(i))},onPointerMove:(i)=>{if(!t.current)return;e(Y(i))},onPointerUp:(i)=>{i.currentTarget.releasePointerCapture(i.pointerId),t.current=!1}}};import{jsx as q}from"react/jsx-runtime";var V=({updateDrag:e,alpha:t=1})=>{let D=m(e);return q("div",{className:"AlphaPicker",...D,children:q("div",{style:{left:`${Math.round(t*100)}%`}})})},H=V;import{jsx as J}from"react/jsx-runtime";var k=({updateDrag:e,h:t=0})=>{let D=m(e);return J("div",{className:"HuePicker",...D,children:J("div",{style:{left:`${t/3.6}%`}})})},K=k;import{jsx as O}from"react/jsx-runtime";var z=({updateDrag:e,s:t,v:D})=>{let g=m(e);return O("div",{className:"SVPicker",...g,children:O("div",{style:{left:`${Math.round(t*100)}%`,top:`${Math.round((1-D)*100)}%`}})})},Q=z;import{jsx as u,jsxs as Z}from"react/jsx-runtime";var vn=({color:e,onChange:t,swatches:D=[],alpha:g=!1,perf:b=!1})=>{let[i,f]=W(M(E(e))),[p,r]=W(!1),$=F(()=>g?X:S,[g]),I=(n)=>$(G(n)),d=I(i);R(()=>{if(p&&b)return;let n=E(e);if(d!==$(n))f(M(n))},[d,e,p,b,$]);let y=(n)=>{if(f(n),b&&p)return;t(I(n))},_=({pctX:n,pctY:P})=>y({...i,s:n,v:1-P}),A=({pctX:n})=>y({...i,h:n*360%360}),B=({pctX:n})=>y({...i,alpha:n}),U=(n)=>{let P=E(n.currentTarget.value);if(P!==void 0){let v=M(P);y(v)}else n.currentTarget.blur(),n.currentTarget.value=d};return Z("div",{className:"Huebert",style:{"--sat-color":`hsl(${i.h??0} 100% 50%)`,"--opaque-color":d.slice(0,7)},children:[Z("div",{style:{display:"contents"},onPointerDownCapture:()=>r(!0),onPointerUpCapture:()=>{if(r(!1),b)t(d)},children:[u(Q,{updateDrag:_,s:i.s,v:i.v}),u(K,{updateDrag:A,h:i.h}),g&&u(H,{updateDrag:B,alpha:i.alpha})]}),u("input",{className:"HuebertInput",onBlur:U,onKeyDown:(n)=>{if(n.key==="Enter")U(n)},defaultValue:d},d),D.length>0&&u("div",{className:"HuebertSwatches",children:D.map((n,P)=>u("button",{className:"HuebertSwatch",style:{background:n},onClick:()=>{let v=M(E(n)),N={mode:"hsv",h:i.h,s:v.s,v:v.v};if(g)N.alpha=1;if(v.v>0&&v.s>0)N.h=v.h;y(N)}},P))})]})};export{vn as ColorPicker};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "huebert",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/index.css

@@ -1 +0,0 @@
-.Huebert{display:flex;flex-direction:column;width:230px}.Huebert .SVPicker{background:linear-gradient(to bottom,transparent,black),linear-gradient(to right,white,var(--sat-color));width:100%;height:230px}.Huebert .SVPicker div{position:relative;background:var(--opaque-color);border:2px solid #fff;border-radius:20px;width:20px;height:20px;transform:translate(-50%,-50%)}.Huebert .HuePicker{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);width:100%;height:24px}.Huebert .HuePicker div{position:relative;background:var(--sat-color);border:2px solid #fff;border-radius:6px;width:6px;height:100%;top:50%;transform:translate(-50%,-50%)}.Huebert .HuebertInput{text-align:center;font-family:monospace}.Huebert .AlphaPicker{background:linear-gradient(to right,transparent,var(--opaque-color)),repeating-conic-gradient(#888 0% 25%,white 0% 50%)0 0/12px 12px;width:100%;height:24px}.Huebert .AlphaPicker div{position:relative;background:0 0;border:2px solid #fff;border-radius:6px;width:6px;height:100%;top:50%;transform:translate(-50%,-50%)}.Huebert .HuebertSwatches{display:flex;flex-wrap:wrap;justify-content:center;width:100%}.Huebert .HuebertSwatches .HuebertSwatch{border:none;border-radius:5px;width:25px;height:25px;margin:5px}