xtreme-ui/dist/storybook/assets/ColorPopper-KBShkTdt.js

Collection of reusable components that can be used in web projects

import{r,h as De,j as w,$ as je,e as Le}from"./iframe-5Rr_RUeM.js";import{i as ce,a as Oe,c as Ve,s as Ae,f as qe,o as Ke,b as B,g as fe,d as Be,e as de,h as Fe,j as We,k as Ue}from"./floating-ui.dom-BTmOqyi9.js";import{r as _e}from"./index-BVe1xG5r.js";import{c as ne}from"./clsx-B-dksMZM.js";import{u as Ye,w as U,I as Xe,g as ze}from"./useScreen-BR45ve_F.js";import{C as Ze}from"./ColorPicker-WGXTk78b.js";import{T as Ge}from"./Textfield-JZRQAuDu.js";import{B as me}from"./Button-DvCW9M4Z.js";function Je(e,t){if(typeof e=="function")e(t);else if(e!=null)try{e.current=t}catch{throw new Error(`Cannot assign value "${t}" to ref "${e}"`)}}function Qe(e){return t=>{e.forEach(n=>Je(n,t))}}const et="input:not([type='hidden']):not([disabled]),[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";function ye(e,t){if(!e||!t)return!1;const n=t.getRootNode==null?void 0:t.getRootNode();if(e.contains(t))return!0;if(n&&Oe(n)){let o=t;for(;o;){if(e===o)return!0;o=o.parentNode||o.host}}return!1}function Q(e){return"composedPath"in e?e.composedPath()[0]:e.target}function pe(e,t){if(t==null)return!1;if("composedPath"in e)return e.composedPath().includes(t);const n=e;return n.target!=null&&t.contains(n.target)}function tt(e){return e.matches("html,body")}function ve(e){return e?.ownerDocument||document}function nt(e){return ce(e)&&e.matches(et)}function re(e,t,n){return n===void 0&&(n=!0),e.filter(s=>{var u;return s.parentId===t&&(!n||((u=s.context)==null?void 0:u.open))}).flatMap(s=>[s,...re(e,s.id,n)])}function ot(e){return"nativeEvent"in e}function Re(e,t){return["mouse","pen"].includes(e)}var rt=typeof document<"u",st=function(){},G=rt?r.useLayoutEffect:st;const it={...De};function oe(e){const t=r.useRef(e);return G(()=>{t.current=e}),t}const ct=it.useInsertionEffect,lt=ct||(e=>e());function Z(e){const t=r.useRef(()=>{});return lt(()=>{t.current=e}),r.useCallback(function(){for(var n=arguments.length,o=new Array(n),s=0;s<n;s++)o[s]=arguments[s];return t.current==null?void 0:t.current(...o)},[])}var at=typeof document<"u",ut=function(){},se=at?r.useLayoutEffect:ut;function ie(e,t){if(e===t)return!0;if(typeof e!=typeof t)return!1;if(typeof e=="function"&&e.toString()===t.toString())return!0;let n,o,s;if(e&&t&&typeof e=="object"){if(Array.isArray(e)){if(n=e.length,n!==t.length)return!1;for(o=n;o--!==0;)if(!ie(e[o],t[o]))return!1;return!0}if(s=Object.keys(e),n=s.length,n!==Object.keys(t).length)return!1;for(o=n;o--!==0;)if(!{}.hasOwnProperty.call(t,s[o]))return!1;for(o=n;o--!==0;){const u=s[o];if(!(u==="_owner"&&e.$$typeof)&&!ie(e[u],t[u]))return!1}return!0}return e!==e&&t!==t}function $e(e){return typeof window>"u"?1:(e.ownerDocument.defaultView||window).devicePixelRatio||1}function Ce(e,t){const n=$e(e);return Math.round(t*n)/n}function ge(e){const t=r.useRef(e);return se(()=>{t.current=e}),t}function ft(e){e===void 0&&(e={});const{placement:t="bottom",strategy:n="absolute",middleware:o=[],platform:s,elements:{reference:u,floating:f}={},transform:i=!0,whileElementsMounted:h,open:a}=e,[g,C]=r.useState({x:0,y:0,strategy:n,placement:t,middlewareData:{},isPositioned:!1}),[v,y]=r.useState(o);ie(v,o)||y(o);const[E,c]=r.useState(null),[R,M]=r.useState(null),N=r.useCallback(l=>{l!==_.current&&(_.current=l,c(l))},[]),p=r.useCallback(l=>{l!==P.current&&(P.current=l,M(l))},[]),b=u||E,D=f||R,_=r.useRef(null),P=r.useRef(null),S=r.useRef(g),L=h!=null,A=ge(h),K=ge(s),Y=ge(a),V=r.useCallback(()=>{if(!_.current||!P.current)return;const l={placement:t,strategy:n,middleware:v};K.current&&(l.platform=K.current),Ve(_.current,P.current,l).then(T=>{const k={...T,isPositioned:Y.current!==!1};d.current&&!ie(S.current,k)&&(S.current=k,_e.flushSync(()=>{C(k)}))})},[v,t,n,K,Y]);se(()=>{a===!1&&S.current.isPositioned&&(S.current.isPositioned=!1,C(l=>({...l,isPositioned:!1})))},[a]);const d=r.useRef(!1);se(()=>(d.current=!0,()=>{d.current=!1}),[]),se(()=>{if(b&&(_.current=b),D&&(P.current=D),b&&D){if(A.current)return A.current(b,D,V);V()}},[b,D,V,A,L]);const I=r.useMemo(()=>({reference:_,floating:P,setReference:N,setFloating:p}),[N,p]),x=r.useMemo(()=>({reference:b,floating:D}),[b,D]),H=r.useMemo(()=>{const l={position:n,left:0,top:0};if(!x.floating)return l;const T=Ce(x.floating,g.x),k=Ce(x.floating,g.y);return i?{...l,transform:"translate("+T+"px, "+k+"px)",...$e(x.floating)>=1.5&&{willChange:"transform"}}:{position:n,left:T,top:k}},[n,i,x.floating,g.x,g.y]);return r.useMemo(()=>({...g,update:V,refs:I,elements:x,floatingStyles:H}),[g,V,I,x,H])}const dt=(e,t)=>({...Ke(e),options:[e,t]}),mt=(e,t)=>({...Ae(e),options:[e,t]}),pt=(e,t)=>({...qe(e),options:[e,t]}),gt="data-floating-ui-focusable",Ee="active",xe="selected",ht={...De};let be=!1,yt=0;const we=()=>"floating-ui-"+Math.random().toString(36).slice(2,6)+yt++;function vt(){const[e,t]=r.useState(()=>be?we():void 0);return G(()=>{e==null&&t(we())},[]),r.useEffect(()=>{be=!0},[]),e}const Rt=ht.useId,Ct=Rt||vt;function Et(){const e=new Map;return{emit(t,n){var o;(o=e.get(t))==null||o.forEach(s=>s(n))},on(t,n){e.has(t)||e.set(t,new Set),e.get(t).add(n)},off(t,n){var o;(o=e.get(t))==null||o.delete(n)}}}const xt=r.createContext(null),bt=r.createContext(null),wt=()=>{var e;return((e=r.useContext(xt))==null?void 0:e.id)||null},Ie=()=>r.useContext(bt);function Pt(e){return"data-floating-ui-"+e}function Pe(e){return ce(e.target)&&e.target.tagName==="BUTTON"}function St(e){return ce(e.target)&&e.target.tagName==="A"}function Se(e){return nt(e)}function Tt(e,t){t===void 0&&(t={});const{open:n,onOpenChange:o,dataRef:s,elements:{domReference:u}}=e,{enabled:f=!0,event:i="click",toggle:h=!0,ignoreMouse:a=!1,keyboardHandlers:g=!0,stickIfOpen:C=!0}=t,v=r.useRef(),y=r.useRef(!1),E=r.useMemo(()=>({onPointerDown(c){v.current=c.pointerType},onMouseDown(c){const R=v.current;c.button===0&&i!=="click"&&(Re(R)&&a||(n&&h&&(!(s.current.openEvent&&C)||s.current.openEvent.type==="mousedown")?o(!1,c.nativeEvent,"click"):(c.preventDefault(),o(!0,c.nativeEvent,"click"))))},onClick(c){const R=v.current;if(i==="mousedown"&&v.current){v.current=void 0;return}Re(R)&&a||(n&&h&&(!(s.current.openEvent&&C)||s.current.openEvent.type==="click")?o(!1,c.nativeEvent,"click"):o(!0,c.nativeEvent,"click"))},onKeyDown(c){v.current=void 0,!(c.defaultPrevented||!g||Pe(c))&&(c.key===" "&&!Se(u)&&(c.preventDefault(),y.current=!0),!St(c)&&c.key==="Enter"&&o(!(n&&h),c.nativeEvent,"click"))},onKeyUp(c){c.defaultPrevented||!g||Pe(c)||Se(u)||c.key===" "&&y.current&&(y.current=!1,o(!(n&&h),c.nativeEvent,"click"))}}),[s,u,i,a,g,o,n,C,h]);return r.useMemo(()=>f?{reference:E}:{},[f,E])}const kt={pointerdown:"onPointerDown",mousedown:"onMouseDown",click:"onClick"},Mt={pointerdown:"onPointerDownCapture",mousedown:"onMouseDownCapture",click:"onClickCapture"},Te=e=>{var t,n;return{escapeKey:typeof e=="boolean"?e:(t=e?.escapeKey)!=null?t:!1,outsidePress:typeof e=="boolean"?e:(n=e?.outsidePress)!=null?n:!0}};function Dt(e,t){t===void 0&&(t={});const{open:n,onOpenChange:o,elements:s,dataRef:u}=e,{enabled:f=!0,escapeKey:i=!0,outsidePress:h=!0,outsidePressEvent:a="pointerdown",referencePress:g=!1,referencePressEvent:C="pointerdown",ancestorScroll:v=!1,bubbles:y,capture:E}=t,c=Ie(),R=Z(typeof h=="function"?h:()=>!1),M=typeof h=="function"?R:h,N=r.useRef(!1),{escapeKey:p,outsidePress:b}=Te(y),{escapeKey:D,outsidePress:_}=Te(E),P=r.useRef(!1),S=Z(d=>{var I;if(!n||!f||!i||d.key!=="Escape"||P.current)return;const x=(I=u.current.floatingContext)==null?void 0:I.nodeId,H=c?re(c.nodesRef.current,x):[];if(!p&&(d.stopPropagation(),H.length>0)){let l=!0;if(H.forEach(T=>{var k;if((k=T.context)!=null&&k.open&&!T.context.dataRef.current.__escapeKeyBubbles){l=!1;return}}),!l)return}o(!1,ot(d)?d.nativeEvent:d,"escape-key")}),L=Z(d=>{var I;const x=()=>{var H;S(d),(H=Q(d))==null||H.removeEventListener("keydown",x)};(I=Q(d))==null||I.addEventListener("keydown",x)}),A=Z(d=>{var I;const x=u.current.insideReactTree;u.current.insideReactTree=!1;const H=N.current;if(N.current=!1,a==="click"&&H||x||typeof M=="function"&&!M(d))return;const l=Q(d),T="["+Pt("inert")+"]",k=ve(s.floating).querySelectorAll(T);let q=B(l)?l:null;for(;q&&!de(q);){const j=Fe(q);if(de(j)||!B(j))break;q=j}if(k.length&&B(l)&&!tt(l)&&!ye(l,s.floating)&&Array.from(k).every(j=>!ye(q,j)))return;if(ce(l)&&V){const j=de(l),O=We(l),X=/auto|scroll/,le=j||X.test(O.overflowX),ae=j||X.test(O.overflowY),ue=le&&l.clientWidth>0&&l.scrollWidth>l.clientWidth,m=ae&&l.clientHeight>0&&l.scrollHeight>l.clientHeight,$=O.direction==="rtl",F=m&&($?d.offsetX<=l.offsetWidth-l.clientWidth:d.offsetX>l.clientWidth),W=ue&&d.offsetY>l.clientHeight;if(F||W)return}const ee=(I=u.current.floatingContext)==null?void 0:I.nodeId,J=c&&re(c.nodesRef.current,ee).some(j=>{var O;return pe(d,(O=j.context)==null?void 0:O.elements.floating)});if(pe(d,s.floating)||pe(d,s.domReference)||J)return;const te=c?re(c.nodesRef.current,ee):[];if(te.length>0){let j=!0;if(te.forEach(O=>{var X;if((X=O.context)!=null&&X.open&&!O.context.dataRef.current.__outsidePressBubbles){j=!1;return}}),!j)return}o(!1,d,"outside-press")}),K=Z(d=>{var I;const x=()=>{var H;A(d),(H=Q(d))==null||H.removeEventListener(a,x)};(I=Q(d))==null||I.addEventListener(a,x)});r.useEffect(()=>{if(!n||!f)return;u.current.__escapeKeyBubbles=p,u.current.__outsidePressBubbles=b;let d=-1;function I(k){o(!1,k,"ancestor-scroll")}function x(){window.clearTimeout(d),P.current=!0}function H(){d=window.setTimeout(()=>{P.current=!1},Be()?5:0)}const l=ve(s.floating);i&&(l.addEventListener("keydown",D?L:S,D),l.addEventListener("compositionstart",x),l.addEventListener("compositionend",H)),M&&l.addEventListener(a,_?K:A,_);let T=[];return v&&(B(s.domReference)&&(T=fe(s.domReference)),B(s.floating)&&(T=T.concat(fe(s.floating))),!B(s.reference)&&s.reference&&s.reference.contextElement&&(T=T.concat(fe(s.reference.contextElement)))),T=T.filter(k=>{var q;return k!==((q=l.defaultView)==null?void 0:q.visualViewport)}),T.forEach(k=>{k.addEventListener("scroll",I,{passive:!0})}),()=>{i&&(l.removeEventListener("keydown",D?L:S,D),l.removeEventListener("compositionstart",x),l.removeEventListener("compositionend",H)),M&&l.removeEventListener(a,_?K:A,_),T.forEach(k=>{k.removeEventListener("scroll",I)}),window.clearTimeout(d)}},[u,s,i,M,a,n,o,v,f,p,b,S,D,L,A,_,K]),r.useEffect(()=>{u.current.insideReactTree=!1},[u,M,a]);const Y=r.useMemo(()=>({onKeyDown:S,...g&&{[kt[C]]:d=>{o(!1,d.nativeEvent,"reference-press")},...C!=="click"&&{onClick(d){o(!1,d.nativeEvent,"reference-press")}}}}),[S,o,g,C]),V=r.useMemo(()=>({onKeyDown:S,onMouseDown(){N.current=!0},onMouseUp(){N.current=!0},[Mt[a]]:()=>{u.current.insideReactTree=!0}}),[S,a,u]);return r.useMemo(()=>f?{reference:Y,floating:V}:{},[f,Y,V])}function _t(e){const{open:t=!1,onOpenChange:n,elements:o}=e,s=Ct(),u=r.useRef({}),[f]=r.useState(()=>Et()),i=wt()!=null,[h,a]=r.useState(o.reference),g=Z((y,E,c)=>{u.current.openEvent=y?E:void 0,f.emit("openchange",{open:y,event:E,reason:c,nested:i}),n?.(y,E,c)}),C=r.useMemo(()=>({setPositionReference:a}),[]),v=r.useMemo(()=>({reference:h||o.reference||null,floating:o.floating||null,domReference:o.reference}),[h,o.reference,o.floating]);return r.useMemo(()=>({dataRef:u,open:t,onOpenChange:g,elements:v,events:f,floatingId:s,refs:C}),[t,g,v,f,s,C])}function $t(e){e===void 0&&(e={});const{nodeId:t}=e,n=_t({...e,elements:{reference:null,floating:null,...e.elements}}),o=e.rootContext||n,s=o.elements,[u,f]=r.useState(null),[i,h]=r.useState(null),g=s?.domReference||u,C=r.useRef(null),v=Ie();G(()=>{g&&(C.current=g)},[g]);const y=ft({...e,elements:{...s,...i&&{reference:i}}}),E=r.useCallback(p=>{const b=B(p)?{getBoundingClientRect:()=>p.getBoundingClientRect(),getClientRects:()=>p.getClientRects(),contextElement:p}:p;h(b),y.refs.setReference(b)},[y.refs]),c=r.useCallback(p=>{(B(p)||p===null)&&(C.current=p,f(p)),(B(y.refs.reference.current)||y.refs.reference.current===null||p!==null&&!B(p))&&y.refs.setReference(p)},[y.refs]),R=r.useMemo(()=>({...y.refs,setReference:c,setPositionReference:E,domReference:C}),[y.refs,c,E]),M=r.useMemo(()=>({...y.elements,domReference:g}),[y.elements,g]),N=r.useMemo(()=>({...y,...o,refs:R,elements:M,nodeId:t}),[y,R,M,t,o]);return G(()=>{o.dataRef.current.floatingContext=N;const p=v?.nodesRef.current.find(b=>b.id===t);p&&(p.context=N)}),r.useMemo(()=>({...y,context:N,refs:R,elements:M}),[y,R,M,N])}function he(e,t,n){const o=new Map,s=n==="item";let u=e;if(s&&e){const{[Ee]:f,[xe]:i,...h}=e;u=h}return{...n==="floating"&&{tabIndex:-1,[gt]:""},...u,...t.map(f=>{const i=f?f[n]:null;return typeof i=="function"?e?i(e):null:i}).concat(e).reduce((f,i)=>(i&&Object.entries(i).forEach(h=>{let[a,g]=h;if(!(s&&[Ee,xe].includes(a)))if(a.indexOf("on")===0){if(o.has(a)||o.set(a,[]),typeof g=="function"){var C;(C=o.get(a))==null||C.push(g),f[a]=function(){for(var v,y=arguments.length,E=new Array(y),c=0;c<y;c++)E[c]=arguments[c];return(v=o.get(a))==null?void 0:v.map(R=>R(...E)).find(R=>R!==void 0)}}}else f[a]=g}),f),{})}}function It(e){e===void 0&&(e=[]);const t=e.map(i=>i?.reference),n=e.map(i=>i?.floating),o=e.map(i=>i?.item),s=r.useCallback(i=>he(i,e,"reference"),t),u=r.useCallback(i=>he(i,e,"floating"),n),f=r.useCallback(i=>he(i,e,"item"),o);return r.useMemo(()=>({getReferenceProps:s,getFloatingProps:u,getItemProps:f}),[s,u,f])}const ke=e=>e.replace(/[A-Z]+(?![a-z])|[A-Z]/g,(t,n)=>(n?"-":"")+t.toLowerCase());function z(e,t){return typeof e=="function"?e(t):e}function Ht(e,t){const[n,o]=r.useState(e);return e&&!n&&o(!0),r.useEffect(()=>{if(!e&&n){const s=setTimeout(()=>o(!1),t);return()=>clearTimeout(s)}},[e,n,t]),n}function Nt(e,t){t===void 0&&(t={});const{open:n,elements:{floating:o}}=e,{duration:s=250}=t,f=(typeof s=="number"?s:s.close)||0,[i,h]=r.useState("unmounted"),a=Ht(n,f);return!a&&i==="close"&&h("unmounted"),G(()=>{if(o){if(n){h("initial");const g=requestAnimationFrame(()=>{_e.flushSync(()=>{h("open")})});return()=>{cancelAnimationFrame(g)}}h("close")}},[n,o]),{isMounted:a,status:i}}function jt(e,t){t===void 0&&(t={});const{initial:n={opacity:0},open:o,close:s,common:u,duration:f=250}=t,i=e.placement,h=i.split("-")[0],a=r.useMemo(()=>({side:h,placement:i}),[h,i]),g=typeof f=="number",C=(g?f:f.open)||0,v=(g?f:f.close)||0,[y,E]=r.useState(()=>({...z(u,a),...z(n,a)})),{isMounted:c,status:R}=Nt(e,{duration:f}),M=oe(n),N=oe(o),p=oe(s),b=oe(u);return G(()=>{const D=z(M.current,a),_=z(p.current,a),P=z(b.current,a),S=z(N.current,a)||Object.keys(D).reduce((L,A)=>(L[A]="",L),{});if(R==="initial"&&E(L=>({transitionProperty:L.transitionProperty,...P,...D})),R==="open"&&E({transitionProperty:Object.keys(S).map(ke).join(","),transitionDuration:C+"ms",...P,...S}),R==="close"){const L=_||D;E({transitionProperty:Object.keys(L).map(ke).join(","),transitionDuration:v+"ms",...P,...L})}},[v,p,M,N,b,C,R,a]),{isMounted:c,styles:y}}function He(e,t){const{className:n,popperClassName:o,input:s="textfield",size:u="default",placeholder:f="Color Picker",colorHeading:i="Pick color",schemeHeading:h,themeScheme:a,setThemeScheme:g,showReset:C=!0,alpha:v,shade:y,swatch:E,hideWheel:c=!1,color:R,setColor:M}=e,N=Ye(),p=r.useMemo(()=>U(R),[]),b=r.useMemo(()=>Xe(R),[R]),[D,_]=r.useState(p.toHsv()),[P,S]=r.useState(p.toHex()),[L,A]=r.useState(i),K=r.useRef(!1),[Y,V]=r.useState(!1),{refs:d,floatingStyles:I,context:x}=$t({open:Y,onOpenChange:V,middleware:[mt({crossAxis:!0,padding:18}),pt(),dt(({placement:m})=>m==="bottom"?10:16)],whileElementsMounted:Ue}),{isMounted:H,styles:l}=jt(x,{duration:200,initial:({side:m})=>({opacity:0,translate:m==="bottom"?"0px 8px":"0px -8px"})}),{getReferenceProps:T,getFloatingProps:k}=It([Tt(x),Dt(x)]),[q,ee,J]=r.useMemo(()=>{const m=U(D),$=m.toHsl(),F=p.toHsl();return[`${Math.round($.h)} ${Math.round($.s)}% ${Math.round($.l)}%`,`${Math.round(F.h)} ${Math.round(F.s)}% ${Math.round(F.l)}%`,m.isLight()?"black":"white"]},[p,D]),te=P!==p.toHex(),j=s==="button"||s==="buttonLabel",O=m=>{K.current=!0,b==="rgb"?M(m.toRgb()):b==="hex"?M(m.toHex()):b==="hsl"?M(m.toHsl()):b==="hsv"&&M(m.toHsv())},X=m=>{S(m);const $=U(m);$.isValid()&&(_($.toHsv()),O($))},le=m=>{const $=U(m);_(m),S($.toHex()),O($)},ae=m=>{const $=U(m);_($.toHsv()),S($.toHex()),O($)},ue=()=>{_(p.toHsv()),S(p.toHex()),O(p)};return r.useEffect(()=>{if(!K.current){const m=U(R);_(m.toHsv()),S(m.toHex())}K.current=!1},[R]),r.useEffect(()=>{A(ze(U(P).toHsl())??i)},[i,P]),w.jsxs(w.Fragment,{children:[j?w.jsx(me,{className:"xtrColorButton",ref:d.setReference,size:u,icon:"f53f",iconType:"solid",label:s==="buttonLabel"?P:void 0,style:{"--themeColor":q,"--iconColor":J,color:J},onClick:()=>V(!0),...T()}):w.jsx(Ge,{className:ne("xtrColorInput",n),ref:d.setReference,placeholder:f,icon:"f53f",iconType:"solid",active:Y,value:P,onChange:m=>X(m.target.value),style:{"--colorBrandPrimary":q,"--iconColor":J},onFocus:()=>V(!0),...T()}),H&&w.jsxs("div",{ref:Qe([t,d.setFloating]),className:ne("xtrColorPopper",o),style:{...I,...l,"--colorBrandPrimary":q},...k(),children:[(E||!c)&&w.jsxs("div",{className:ne("header",j&&"withInput"),children:[w.jsxs("div",{className:"heading",children:[w.jsxs("div",{children:[w.jsx("h1",{children:L}),j&&w.jsx("input",{placeholder:"#Hex",className:ne("popperInput",n),value:P,autoFocus:N.isLargest,onChange:m=>X(m.target.value)})]}),w.jsx("h1",{children:i})]}),C&&w.jsx(je,{code:"f1da",type:"solid",style:{"--colorBrandPrimary":ee,visibility:te?"visible":"hidden"},onClick:ue})]}),E&&w.jsx("div",{className:"swatch",children:E.map((m,$)=>{const F=U(P).isEqual(m),W=U(m).toHsl(),Ne=`${W.h} ${W.s}% ${W.l}%`;return w.jsx(me,{className:"swatchItem",icon:"f00c",iconType:"solid",size:"mini",style:{"--themeColor":Ne,color:F?"white":"transparent"},onClick:()=>ae(W)},`ThemeColor-${W.h}${W.s}${W.l}-${$}`)})}),!c&&w.jsx(Ze,{className:"colorPicker",alpha:v,shade:y,color:D,setColor:le}),h&&w.jsxs("div",{className:"themeScheme",children:[w.jsx("div",{className:"header",children:w.jsxs("div",{className:"heading",children:[w.jsx("div",{children:w.jsx("h1",{children:a})}),w.jsx("h1",{children:h})]})}),w.jsx("div",{className:"schemeSelector",children:Le.map(({name:m,icon:$},F)=>w.jsx(me,{icon:$,iconType:"solid",disabled:a===m,type:a===m?"primary":"secondary",onClick:()=>g?.(m)},`ThemeScheme-${m}-${F}`))})]})]})]})}const Me=r.forwardRef(He);He.displayName="ColorPopper";try{Me.displayName="ColorPopper",Me.__docgenInfo={description:"",displayName:"ColorPopper",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},popperClassName:{defaultValue:null,description:"",name:"popperClassName",required:!1,type:{name:"string"}},input:{defaultValue:null,description:"",name:"input",required:!1,type:{name:"enum",value:[{value:'"button"'},{value:'"buttonLabel"'},{value:'"textfield"'}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"mini"'},{value:'"default"'}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"string"}},colorHeading:{defaultValue:null,description:"",name:"colorHeading",required:!1,type:{name:"string"}},schemeHeading:{defaultValue:null,description:"",name:"schemeHeading",required:!1,type:{name:"string"}},themeScheme:{defaultValue:null,description:"",name:"themeScheme",required:!1,type:{name:"enum",value:[{value:'"light"'},{value:'"dark"'},{value:'"auto"'}]}},setThemeScheme:{defaultValue:null,description:"",name:"setThemeScheme",required:!1,type:{name:'((scheme: "light" | "dark" | "auto") => void)'}},showReset:{defaultValue:null,description:"",name:"showReset",required:!1,type:{name:"boolean"}},alpha:{defaultValue:null,description:"",name:"alpha",required:!1,type:{name:"boolean"}},shade:{defaultValue:null,description:"",name:"shade",required:!1,type:{name:"boolean"}},hideWheel:{defaultValue:null,description:"",name:"hideWheel",required:!1,type:{name:"boolean"}},swatch:{defaultValue:null,description:"",name:"swatch",required:!1,type:{name:"T[]"}},color:{defaultValue:null,description:"",name:"color",required:!0,type:{name:"AnyColor"}},setColor:{defaultValue:null,description:"",name:"setColor",required:!0,type:{name:"(col: ExtractColorType<T>) => void"}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"Ref<HTMLDivElement>"}}}}}catch{}export{Me as C};