@sputnick/lumiere/lib/bundle.js

A styled component library used in my videos

!function(i,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@motion-canvas/2d/lib/jsx-runtime"),require("@motion-canvas/2d/lib/components"),require("@motion-canvas/2d/lib/decorators"),require("@motion-canvas/core/lib/flow"),require("@motion-canvas/core/lib/signals"),require("@motion-canvas/core/lib/utils"),require("@motion-canvas/core/lib/tweening"),require("@motion-canvas/core/lib/types")):"function"==typeof define&&define.amd?define(["exports","@motion-canvas/2d/lib/jsx-runtime","@motion-canvas/2d/lib/components","@motion-canvas/2d/lib/decorators","@motion-canvas/core/lib/flow","@motion-canvas/core/lib/signals","@motion-canvas/core/lib/utils","@motion-canvas/core/lib/tweening","@motion-canvas/core/lib/types"],t):t((i="undefined"!=typeof globalThis?globalThis:i||self).MyFirstMotionCanvasLibrary={},i.jsxRuntime,i.components,i.decorators,i.flow,i.signals,i.utils,i.tweening,i.types)}(this,(function(i,t,e,o,r,s,l,h,n){"use strict";function a(i,t,e,o){var r,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(i,t,e,o);else for(var h=i.length-1;h>=0;h--)(r=i[h])&&(l=(s<3?r(l):s>3?r(t,e,l):r(t,e))||l);return s>3&&l&&Object.defineProperty(t,e,l),l}const c="rgba(255, 255, 255, 0.54)",g="rgba(0, 0, 0, 0.87)",p="#141414",d="#242424",u="#2196f3",y={fontFamily:"JetBrains Mono",fontWeight:700,fontSize:28},f={...y,fill:c},b={...y,fill:g};var x;!function(i){i[i.Label=0]="Label",i[i.Value=1]="Value",i[i.Both=2]="Both"}(x||(x={}));class v extends e.Rect{ref=l.createRef();constructor(i){super({...i}),void 0===this.label()&&this.label(this.index()),this.add(t.jsxs(e.Rect,{ref:this.ref,smoothCorners:!0,cornerSharpness:.65,radius:10,size:[60,60],fill:p,gap:40,padding:20,strokeFirst:!0,stroke:p,lineWidth:8,justifyContent:"start",alignItems:"center",direction:"column",layout:!0,children:[t.jsx(e.Text,{...f,lineHeight:f.fontSize,text:`${i.value}`}),t.jsx(e.Text,{lineHeight:f.fontSize,...f,fontSize:.7*b.fontSize,text:`${i.label}`})]}))}*highlightBorder(i=p,t=.2){yield*h.tween(t,(t=>{this.ref().stroke(n.Color.lerp(this.ref().stroke(),new n.Color(i),h.easeInOutCubic(t)))}))}*highlightText(i,t=p,e=.2){yield*h.tween(e,(e=>{i.fill(n.Color.lerp(i.fill(),new n.Color(t),h.easeInOutCubic(e)))}))}*highlightLabel(i=p,t=.2){const e=this.ref().children()[1];yield*this.highlightText(e,i,t)}*highlightValue(i=p,t=.2){const e=this.ref().children()[0];yield*this.highlightText(e,i,t)}*highlight(i={Color:p,Duration:.2,HighlightBorder:!0,Subject:x.Both}){const t=[];switch(this.highlightBorder&&t.push(this.highlightBorder(i.Color,i.Duration)),i.Subject){case x.Label:t.push(this.highlightLabel(i.Color,i.Duration));break;case x.Value:t.push(this.highlightValue(i.Color,i.Duration));break;case x.Both:default:i.Color==p?(t.push(this.highlightValue(c,i.Duration)),t.push(this.highlightLabel(c,i.Duration))):(t.push(this.highlightValue(i.Color,i.Duration)),t.push(this.highlightLabel(i.Color,i.Duration)))}yield*r.all(...t)}}a([o.signal()],v.prototype,"index",void 0),a([o.signal()],v.prototype,"value",void 0),a([o.signal()],v.prototype,"label",void 0);const m=i=>void 0!==i;function A(i){if(m(i))return i;let t;for(let e=0;e<i.length;e++)t[e]=i[e];return t}var j;i.Align=void 0,(j=i.Align||(i.Align={}))[j.Top=0]="Top",j[j.Botom=1]="Botom";class C extends e.Rect{boxArray=s.createSignal([]);pool=i=>l.range(i).map((i=>{const e=A(this.values()),o=Object.entries(e);return t.jsx(v,{ref:l.makeRef(this.boxArray(),i),x:-80*o.length/2+80*i+40,index:i,value:o[i][1],label:o[i][0]})}));constructor(o){super({size:()=>[80*Object.keys(A(this.values())).length+20,100],spawner:()=>this.pool(Object.keys(A(this.values())).length),smoothCorners:!0,cornerSharpness:.65,radius:20,fill:d,...o}),this.add(t.jsxs(e.Layout,{direction:"row",gap:10,layout:!0,offsetY:this.align()===i.Align.Top?-1:1,y:this.align()===i.Align.Top?this.size().y+20:-this.size().y-20,children:[t.jsx(e.Text,{...f,text:this.name()}),t.jsx(e.Text,{...f,fill:this.suffixColor(),text:this.suffix()})]}))}*highlight(i,t){yield*this.boxArray()[i].highlight(t)}*highlightBorder(i,t=p,e=.2){yield*this.boxArray()[i].highlightBorder(t,e)}*swap(i,o,s=.2){const h=l.createRef();this.add(t.jsx(e.Node,{ref:h})),this.boxArray()[i].children()[0].children()[1].reparent(h()),this.boxArray()[o].children()[0].children()[1].reparent(h()),yield*r.all(this.boxArray()[i].position(this.boxArray()[o].position(),s),this.boxArray()[o].position(this.boxArray()[i].position(),s));const n=A(this.values()),a=Object.entries(n);[n[a[i][0]],n[a[o][0]]]=[n[a[o][1]],n[a[i][1]]],h().children()[0].reparent(this.boxArray()[o].children()[0]),h().children()[0].reparent(this.boxArray()[i].children()[0]),[this.boxArray()[i],this.boxArray()[o]]=[this.boxArray()[o],this.boxArray()[i]],h().remove()}*swapAndHighlight(i,t,e={Color:u,Duration:.2,HighlightBorder:!0,Subject:x.Both},o=.5,s=!1){s?(yield*this.highlight(i,e),yield*this.highlight(t,e),yield*this.swap(i,t,o),yield*this.highlight(i,e),yield*this.highlight(t,e)):(yield*r.all(this.highlight(i,e),this.highlight(t,e)),yield*this.swap(i,t,o),yield*r.all(this.highlight(i,{...e,Color:p}),this.highlight(t,{...e,Color:p})))}*push(i,e=.3){const o=s.createSignal(0),r=Object.keys(A(this.values())).length;this.add(t.jsx(v,{ref:l.makeRef(this.boxArray(),r),x:-80*r/2+80*r,y:-50,index:r,value:i,label:r,opacity:()=>o()})),yield*h.tween(e,(i=>{this.boxArray().forEach(((t,e)=>{t.position.x(h.map(t.position.x(),-80*(r+1)/2+80*e+40,i))})),this.boxArray()[r].position.y(h.map(-50,0,i)),this.size.x(h.map(this.size.x(),80*(r+1)+20,i)),o(h.map(0,2,i))})),this.values().push(i)}*chainPush(i,t=.3){const e=[];i.forEach((i=>{e.push(this.push(i,t))})),yield*r.chain(...e)}*pop(i=1,t=.3){const e=[];for(let t=0;t<i;t++)e.push(this.boxArray().length-t-1);const o=s.createSignal(1),r=s.createSignal(0);e.forEach((i=>{this.boxArray()[i].opacity((()=>o())),this.boxArray()[i].position.y((()=>r()))}));const l=this.boxArray().filter(((i,t)=>!e.includes(t)));yield*h.tween(t,(t=>{l.forEach(((e,o)=>{e.position.x(h.map(e.position.x(),80*o+40-80*(this.boxArray().length-i)/2,t))})),this.size.x(h.map(this.size.x(),80*(this.boxArray().length-i)+20,t)),o(h.map(1,0,1.2*t)),r(h.map(0,50,t))})),this.boxArray().filter(((i,t)=>e.includes(t))).forEach((i=>{i.removeChildren(),i.remove()}));for(let t=0;t<i;t++)this.boxArray().pop(),this.values().pop()}*chainPop(i,t=.3){const e=[];for(let o=0;o<i;o++)e.push(this.pop(1,t/i));yield*r.chain(...e)}}a([o.signal()],C.prototype,"values",void 0),a([o.initial("array"),o.signal()],C.prototype,"name",void 0),a([o.initial("[]"),o.signal()],C.prototype,"suffix",void 0),a([o.initial(u),o.signal()],C.prototype,"suffixColor",void 0),a([o.initial(i.Align.Top),o.signal()],C.prototype,"align",void 0),a([o.initial([]),o.signal()],C.prototype,"boxArray",void 0),i.Array=C,i.isLabeledArray=m,i.toLabeledArray=A}));