(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[43817],{43817:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>Z});var l=r(87687),t=r(52751),a=r(31928),o=r(68852),n=r(66557),c=r(20120),i=r(42432);let p=function(s){let{size:e=24,...r}=s;return(0,l.jsx)("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:e,height:e,...r,children:(0,l.jsx)("path",{d:"M3.68546 5.43796C8.61936 1.29159 11.8685 7.4309 12.0406 7.4309C12.2126 7.43091 15.4617 1.29159 20.3956 5.43796C26.8941 10.8991 13.5 21.8215 12.0406 21.8215C10.5811 21.8215 -2.81297 10.8991 3.68546 5.43796Z",stroke:"white",strokeWidth:"2",strokeLinecap:"round"})})},d={up:"↑",down:"↓",left:"←",right:"→"},h=(0,a.I)("span")({name:"Wrapper",class:"w824tl4",propsAsIs:!1}),u=function(s){let{direction:e,...r}=s;return(0,l.jsx)(h,{...r,children:d[e]})};function m(s){return"rgb"===s.type?"rgb(".concat(s.values.r," ").concat(s.values.g," ").concat(s.values.b,")"):"hsl"===s.type?"hsl(".concat(s.values.h,"deg ").concat(s.values.s,"% ").concat(s.values.l,"%)"):"oklch"===s.type?"oklch(".concat(s.values.l," ").concat(s.values.c," ").concat(s.values.h,")"):""}function x(s){return"rgb"===s.type?(0,l.jsxs)(l.Fragment,{children:["rgb(",(0,l.jsx)(g,{children:s.values.r})," ",(0,l.jsx)(g,{children:s.values.g})," ",(0,l.jsx)(g,{children:s.values.b}),")"]}):"hsl"===s.type?(0,l.jsxs)(l.Fragment,{children:["hsl(",(0,l.jsxs)(g,{children:[s.values.h,"deg"]})," ",(0,l.jsxs)(g,{children:[s.values.s,"%"]})," ",(0,l.jsxs)(g,{children:[s.values.l,"%"]}),")"]}):"oklch"===s.type?(0,l.jsxs)(l.Fragment,{children:["oklch(",(0,l.jsx)(g,{children:s.values.l})," ",(0,l.jsx)(g,{children:s.values.c})," ",(0,l.jsx)(g,{children:s.values.h}),")"]}):void 0}r(80463);let g=(0,a.I)("span")({name:"Value",class:"v1wfe94i",propsAsIs:!1});r(16222);let v=(0,a.I)("div")({name:"Wrapper",class:"w1gnkkgg",propsAsIs:!1}),f=(0,a.I)("p")({name:"Heading",class:"h13cj3qq",propsAsIs:!1}),y=(0,a.I)("p")({name:"EmptyParagraph",class:"ekxm994",propsAsIs:!1}),j=(0,a.I)("ul")({name:"List",class:"l1gw5mdv",propsAsIs:!1}),I=(0,a.I)("li")({name:"ListItem",class:"l19m4dgx",propsAsIs:!1}),w=(0,a.I)(I)({name:"DualListItem",class:"d13v6yqn",propsAsIs:!0}),b=(0,a.I)("div")({name:"Value",class:"vjz4mgl",propsAsIs:!1}),k=(0,a.I)("div")({name:"Box",class:"b1dh8lne",propsAsIs:!1}),A=(0,a.I)("span")({name:"Label",class:"lx07i0v",propsAsIs:!1}),C=(0,a.I)("span")({name:"Mouse",class:"mmypw1r",propsAsIs:!1}),T=(0,a.I)("span")({name:"Touch",class:"t1a4wfrh",propsAsIs:!1}),U=function(s){let{colors:e,variant:r}=s,t=e.every(s=>{let{fromColor:e,toColor:r}=s;return function(s,e){switch(s.type){case"rgb":if("rgb"!==e.type)throw Error("Expected “to” color to be of type “rgb”, but got “".concat(e.type,"”"));return s.values.r===e.values.r&&s.values.g===e.values.g&&s.values.b===e.values.b;case"hsl":if("hsl"!==e.type)throw Error("Expected “to” color to be of type “hsl”, but got “".concat(e.type,"”"));return s.values.h===e.values.h&&s.values.s===e.values.s&&s.values.l===e.values.l;case"oklch":if("oklch"!==e.type)throw Error("Expected “to” color to be of type “oklch”, but got “".concat(e.type,"”"));return s.values.l===e.values.l&&s.values.c===e.values.c&&s.values.h===e.values.h}}(e,r)});return(0,l.jsxs)(v,{style:{minHeight:"hsl-plus-180"===r?"26.625rem":"16.3125rem"},children:[(0,l.jsx)(f,{children:"Sample Colors"}),0===e.length&&(0,l.jsxs)(y,{children:["(",(0,l.jsx)(C,{children:"Click"}),(0,l.jsx)(T,{children:"Tap"})," the heart to generate some particles. The first few colors will be shown here.)"]}),(0,l.jsx)(j,{"data-columns":t?"2":"1",children:e.map((s,e)=>{let{fromColor:r,toColor:a}=s;if(!t)return(0,l.jsxs)(w,{style:{"--index":e},children:[(0,l.jsxs)(b,{children:[(0,l.jsx)(k,{style:{background:m(r)}}),(0,l.jsx)(A,{children:x(r)})]}),(0,l.jsx)(u,{direction:"right"}),(0,l.jsxs)(b,{children:[(0,l.jsx)(k,{style:{background:m(a)}}),(0,l.jsx)(A,{children:x(a)})]})]},r.id);{let s=x(r);return(0,l.jsx)(I,{style:{"--index":e},children:(0,l.jsxs)(b,{children:[(0,l.jsx)(k,{style:{background:m(r)}}),(0,l.jsx)(A,{children:s})]})},r.id)}})})]})};r(99568);var q=r(99898);function D(){return(0,l.jsx)(L,{width:"15",height:"43",viewBox:"0 0 15 43",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M4.23024 41.3617C3.8777 41.7868 3.93654 42.4172 4.36166 42.7698C4.78679 43.1223 5.41721 43.0635 5.76976 42.6383L4.23024 41.3617ZM1 0.5C0.447715 0.5 0 0.947715 0 1.5V10.5C0 11.0523 0.447715 11.5 1 11.5C1.55228 11.5 2 11.0523 2 10.5V2.5H10C10.5523 2.5 11 2.05228 11 1.5C11 0.947715 10.5523 0.5 10 0.5H1ZM5 42L5.76976 42.6383C14.4482 32.1731 15.328 23.4432 12.9478 16.3686C10.6091 9.41755 5.16654 4.25232 1.70711 0.792893L1 1.5L0.292893 2.20711C3.83346 5.74768 8.89088 10.5824 11.0522 17.0064C13.172 23.3068 12.5518 31.3269 4.23024 41.3617L5 42Z",fill:"white"})})}let S=(0,a.I)("div")({name:"Wrapper",class:"wgjl34j",propsAsIs:!1}),z=(0,a.I)("img")({name:"ClickMeTxt",class:"ciwfk5f",propsAsIs:!1}),L=(0,a.I)("svg")({name:"Svg",class:"s1fd99fx",propsAsIs:!1}),E=function(s){let{isVisible:e,...r}=s;return(0,l.jsxs)(S,{...r,"data-is-hidden":!e,children:[(0,l.jsx)(D,{}),(0,l.jsx)(z,{alt:"Click me",src:"/images/color-shifting/click-me.png"})]})};r(18289);let F=[2,3,5,8,13,21,34,55,89,144,233,377,610],M=(0,a.I)(c.Ay)({name:"StyledDemo",class:"s1jc1lk2",propsAsIs:!0}),W=(0,a.I)("div")({name:"Wrapper",class:"wsu55tb",propsAsIs:!1}),B=(0,a.I)("div")({name:"TableWrapper",class:"t1qrscf2",propsAsIs:!1}),P=(0,a.I)("div")({name:"ButtonWrapper",class:"b1cpro06",propsAsIs:!1}),V=(0,a.I)("button")({name:"Button",class:"b12y7qoq",propsAsIs:!1}),H=t.memo((0,a.I)("span")({name:"Particle",class:"p5gn37x",propsAsIs:!1})),Z=function(s){let{variant:e,includeClickMe:r,...a}=s,[c,d]=t.useState(!1),[h,u]=t.useState([]),[x,g]=t.useState([]),[v,f]=t.useState(!!r);return(0,n.A)(()=>{u(h.filter(s=>Date.now()-s.createdAt<3e3))},3e3),(0,l.jsx)(M,{...a,initialValues:{particleQuantity:4},outputWrapper:null,controlPosition:"top",customGrid:{gridTemplateColumns:"min(400px, 100%)",justifyContent:"center"},controls:[],children:s=>{let{particleQuantity:t}=s,a=F[t];return(0,l.jsxs)(W,{"data-can-be-annotated":!1,children:[(0,l.jsx)(B,{children:(0,l.jsx)(U,{colors:x,variant:e})}),(0,l.jsxs)(P,{children:[(0,l.jsxs)(V,{"data-is-liked":c,"data-variant":e,style:{"--pop-circle-duration":"".concat(150,"ms")},onClick:()=>{if(c){d(!1);return}d(!0),f(!1);let s=(0,o.y1)(a).map(s=>{let r,l;let t=(0,o.yT)(32,64),n=(0,o.S8)(s,0,a,0,360)+(0,o.yT)(-40,40),c=(0,o.S8)(t,32,64,400,800)+(0,o.yT)(-200,200),i=(0,o.S8)(t,32,64,1e3,2e3)+(0,o.yT)(-200,200),p=(0,o.S8)(t,32,64,0,500)+(0,o.yT)(0,200);switch(e){case"basic-rgb":l={...r={type:"rgb",id:crypto.randomUUID(),values:{r:(0,o.yT)(0,256),g:(0,o.yT)(0,256),b:(0,o.yT)(0,256)}},id:crypto.randomUUID()};break;case"basic-hsl":l={...r={type:"hsl",id:crypto.randomUUID(),values:{h:(0,o.yT)(0,360),s:100,l:80}},id:crypto.randomUUID()};break;case"basic-oklch":l={...r={type:"oklch",id:crypto.randomUUID(),values:{l:.8,c:.1,h:(0,o.yT)(0,360)}},id:crypto.randomUUID()};break;case"filter-flat":l={...r={type:"hsl",id:crypto.randomUUID(),values:{h:(0,o.yT)(0,360),s:80,l:80}},id:crypto.randomUUID()};break;case"hsl-plus-180":r={type:"hsl",id:crypto.randomUUID(),values:{h:(0,o.yT)(0,360),s:100,l:80}},l={type:"hsl",id:crypto.randomUUID(),values:{...r.values,h:r.values.h+180}};break;default:throw Error("Unknown variant: ".concat(e))}let d={id:crypto.randomUUID(),angle:n,distance:t,size:(0,o.yT)(9,15),createdAt:Date.now(),popDuration:c,fadeDuration:i,fadeDelay:p,fromColor:r,toColor:l};return"filter-flat"===e&&(d.toFilter="hue-rotate(720deg)"),d});g(s.slice(0,6).map(s=>({fromColor:s.fromColor,toColor:s.toColor}))),window.setTimeout(()=>{u([...h,...s])},150)},children:[(0,l.jsx)(q.A,{isPopped:c}),(0,l.jsx)(p,{"data-is-heart":"true",size:48}),(0,l.jsx)(i.A,{children:"Like this post"}),h.map(s=>(0,l.jsx)(H,{"data-variant":e,style:{"--angle":s.angle+"deg","--distance":s.distance+"px","--size":s.size+"px","--fade-duration":s.fadeDuration+"ms","--fade-delay":s.fadeDelay+"ms","--pop-duration":s.popDuration+"ms","--from-color":m(s.fromColor),"--to-color":m(s.toColor),"--to-filter":s.toFilter}},s.id))]}),r&&(0,l.jsx)(E,{isVisible:v})]})]})}})};r(74109)},99898:(s,e,r)=>{"use strict";r.d(e,{A:()=>i});var l=r(87687),t=r(52751),a=r(31928);let o=(0,a.I)("svg")({name:"Svg",class:"s7liaeo",propsAsIs:!1}),n=(0,a.I)("circle")({name:"MaskCircle",class:"mr69cpx",propsAsIs:!0}),c=(0,a.I)("circle")({name:"MainCircle",class:"moidzyn",propsAsIs:!0}),i=function(s){let{isPopped:e}=s,r=t.useId();return e?(0,l.jsxs)(o,{viewBox:"0 0 100 100",fill:"none",children:[(0,l.jsx)("defs",{children:(0,l.jsxs)("mask",{id:"".concat(r,"-pop-mask"),children:[(0,l.jsx)("rect",{x:"0",y:"0",width:"100",height:"100",fill:"white"}),(0,l.jsx)(n,{cx:"50",cy:"50",r:"0",fill:"black"})]})}),(0,l.jsx)(c,{mask:"url(#".concat(r,"-pop-mask)"),cx:"50",cy:"50",r:"0",fill:"hsl(270deg 100% 80%)"})]}):null};r(34504)},18289:s=>{s.exports={wgjl34j:"wgjl34j",ciwfk5f:"ciwfk5f",s1fd99fx:"s1fd99fx"}},99568:s=>{s.exports={w1gnkkgg:"w1gnkkgg",h13cj3qq:"h13cj3qq",ekxm994:"ekxm994",l1gw5mdv:"l1gw5mdv",l19m4dgx:"l19m4dgx",fadeFromTransparent:"fadeFromTransparent",d13v6yqn:"d13v6yqn",vjz4mgl:"vjz4mgl",b1dh8lne:"b1dh8lne",lx07i0v:"lx07i0v",mmypw1r:"mmypw1r",t1a4wfrh:"t1a4wfrh"}},16222:s=>{s.exports={v1wfe94i:"v1wfe94i"}},74109:s=>{s.exports={s1jc1lk2:"s1jc1lk2",b1btlj5u:"b1btlj5u",wsu55tb:"wsu55tb",t1qrscf2:"t1qrscf2",b1cpro06:"b1cpro06",b12y7qoq:"b12y7qoq",fromShrunken:"fromShrunken",p5gn37x:"p5gn37x",fadeToTransparent:"fadeToTransparent",fromRestingPosition:"fromRestingPosition","colorShift-p5gn37x":"colorShift-p5gn37x","toFilter-p5gn37x":"toFilter-p5gn37x"}},34504:s=>{s.exports={s7liaeo:"s7liaeo",mr69cpx:"mr69cpx","grow-mr69cpx":"grow-mr69cpx",fadeToTransparent:"fadeToTransparent",moidzyn:"moidzyn","grow-moidzyn":"grow-moidzyn","colorShift-moidzyn":"colorShift-moidzyn"}}}]);
//# sourceMappingURL=43817.111f025fb9de0dce.js.map