@storybook/blocks 7.0.0-alpha.16 → 7.0.0-alpha.17

package/dist/Color-5PT7OO4F.mjs

@@ -0,0 +1 @@
+import{a as E}from"./chunk-PN7NPRFU.mjs";import d,{useCallback as $,useEffect as L,useMemo as X,useState as y}from"react";import{HexColorPicker as I,HslaStringColorPicker as O,RgbaStringColorPicker as F}from"react-colorful";import u from"color-convert";import V from"lodash/throttle";import{styled as f}from"@storybook/theming";import{TooltipNote as z,WithTooltip as B,Form as W,Icons as M}from"@storybook/components";var N=f.div({position:"relative",maxWidth:250}),j=f(B)({position:"absolute",zIndex:1,top:4,left:4}),A=f.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),q=f(z)(({theme:o})=>({fontFamily:o.typography.fonts.base})),D=f.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),J=f.div(({theme:o,active:t})=>({width:16,height:16,boxShadow:t?`${o.appBorderColor} 0 0 0 1px inset, ${o.color.mediumdark}50 0 0 0 4px`:`${o.appBorderColor} 0 0 0 1px inset`,borderRadius:o.appBorderRadius})),K=`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>')`,P=({value:o,active:t,onClick:r,style:e,...a})=>{let n=`linear-gradient(${o}, ${o}), ${K}, linear-gradient(#fff, #fff)`;return d.createElement(J,{...a,...{active:t,onClick:r},style:{...e,backgroundImage:n}})},Q=f(W.Input)(({theme:o})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:o.typography.fonts.base})),U=f(M)(({theme:o})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:o.input.color})),G=(e=>(e.RGB="rgb",e.HSL="hsl",e.HEX="hex",e))(G||{}),m=Object.values(G),Y=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,Z=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,oo=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,k=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,to=/^\s*#?([0-9a-f]{3})\s*$/i,ro={["hex"]:I,["rgb"]:F,["hsl"]:O},x={["hex"]:"transparent",["rgb"]:"rgba(0, 0, 0, 0)",["hsl"]:"hsla(0, 0%, 0%, 0)"},H=o=>{let t=o?.match(Y);if(!t)return[0,0,0,1];let[,r,e,a,n=1]=t;return[r,e,a,n].map(Number)},S=o=>{if(!o)return;let t=!0;if(Z.test(o)){let[l,i,s,C]=H(o),[h,p,c]=u.rgb.hsl([l,i,s])||[0,0,0];return{valid:t,value:o,keyword:u.rgb.keyword([l,i,s]),colorSpace:"rgb",["rgb"]:o,["hsl"]:`hsla(${h}, ${p}%, ${c}%, ${C})`,["hex"]:`#${u.rgb.hex([l,i,s]).toLowerCase()}`}}if(oo.test(o)){let[l,i,s,C]=H(o),[h,p,c]=u.hsl.rgb([l,i,s])||[0,0,0];return{valid:t,value:o,keyword:u.hsl.keyword([l,i,s]),colorSpace:"hsl",["rgb"]:`rgba(${h}, ${p}, ${c}, ${C})`,["hsl"]:o,["hex"]:`#${u.hsl.hex([l,i,s]).toLowerCase()}`}}let r=o.replace("#",""),e=u.keyword.rgb(r)||u.hex.rgb(r),a=u.rgb.hsl(e),n=o;if(/[^#a-f0-9]/i.test(o)?n=r:k.test(o)&&(n=`#${r}`),n.startsWith("#"))t=k.test(n);else try{u.keyword.hex(n)}catch{t=!1}return{valid:t,value:n,keyword:u.rgb.keyword(e),colorSpace:"hex",["rgb"]:`rgba(${e[0]}, ${e[1]}, ${e[2]}, 1)`,["hsl"]:`hsla(${a[0]}, ${a[1]}%, ${a[2]}%, 1)`,["hex"]:n}},eo=(o,t,r)=>{if(!o||!t?.valid)return x[r];if(r!=="hex")return t?.[r]||x[r];if(!t.hex.startsWith("#"))try{return`#${u.keyword.hex(t.hex)}`}catch{return x.hex}let e=t.hex.match(to);if(!e)return k.test(t.hex)?t.hex:x.hex;let[a,n,l]=e[1].split("");return`#${a}${a}${n}${n}${l}${l}`},no=(o,t)=>{let[r,e]=y(o||""),[a,n]=y(()=>S(r)),[l,i]=y(a?.colorSpace||"hex");L(()=>{o===void 0&&(e(""),n(void 0),i("hex"))},[o]);let s=X(()=>eo(r,a,l).toLowerCase(),[r,a,l]),C=$(p=>{let c=S(p),b=c?.value||p||"";e(b),b===""&&(n(void 0),t(void 0)),c&&(n(c),i(c.colorSpace),t(c.value))},[t]),h=$(()=>{let p=m.indexOf(l)+1;p>=m.length&&(p=0),i(m[p]);let c=a?.[m[p]]||"";e(c),t(c)},[a,l,t]);return{value:r,realValue:s,updateValue:C,color:a,colorSpace:l,cycleColorSpace:h}},w=o=>o.replace(/\s*/,"").toLowerCase(),so=(o,t,r)=>{let[e,a]=y(t?.valid?[t]:[]);L(()=>{t===void 0&&a([])},[t]);let n=X(()=>(o||[]).map(s=>typeof s=="string"?S(s):s.title?{...S(s.color),keyword:s.title}:S(s.color)).concat(e).filter(Boolean).slice(-27),[o,e]),l=$(i=>{!i?.valid||n.some(s=>w(s[r])===w(i[r]))||a(s=>s.concat(i))},[r,n]);return{presets:n,addPreset:l}},ao=({name:o,value:t,onChange:r,onFocus:e,onBlur:a,presetColors:n,startOpen:l})=>{let i=$(V(r,200),[r]),{value:s,realValue:C,updateValue:h,color:p,colorSpace:c,cycleColorSpace:b}=no(t,i),{presets:v,addPreset:T}=so(n,p,c),R=ro[c];return d.createElement(N,null,d.createElement(j,{trigger:"click",startOpen:l,closeOnClick:!0,onVisibilityChange:()=>T(p),tooltip:d.createElement(A,null,d.createElement(R,{color:C==="transparent"?"#000000":C,...{onChange:h,onFocus:e,onBlur:a}}),v.length>0&&d.createElement(D,null,v.map((g,_)=>d.createElement(B,{key:`${g.value}-${_}`,hasChrome:!1,tooltip:d.createElement(q,{note:g.keyword||g.value})},d.createElement(P,{value:g[c],active:p&&w(g[c])===w(p[c]),onClick:()=>h(g.value)})))))},d.createElement(P,{value:C,style:{margin:4}})),d.createElement(Q,{id:E(o),value:s,onChange:g=>h(g.target.value),onFocus:g=>g.target.select(),placeholder:"Choose color..."}),s?d.createElement(U,{icon:"markup",onClick:b}):null)},mo=ao;export{ao as ColorControl,mo as default};

package/dist/chunk-PN7NPRFU.mjs

@@ -0,0 +1 @@
+var o=t=>`control-${t.replace(/\s+/g,"-")}`,r=t=>`set-${t.replace(/\s+/g,"-")}`;export{o as a,r as b};