@storybook/blocks 7.0.0-alpha.10 → 7.0.0-alpha.11

package/dist/Color-EZUEPCQV.mjs

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

package/dist/chunk-BLZ4VDNJ.mjs

@@ -0,0 +1 @@
+var r=Object.defineProperty;var e=(t,o)=>r(t,"name",{value:o,configurable:!0});var l=e(t=>`control-${t.replace(/\s+/g,"-")}`,"getControlId"),s=e(t=>`set-${t.replace(/\s+/g,"-")}`,"getControlSetterButtonId");export{e as a,l as b,s as c};