@sputnick/lumiere/lib/index.js

A styled component library used in my videos

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