loading-state-zoo 0.1.2 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +111 -30
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +15 -3
- package/dist/index.d.ts +15 -3
- package/dist/index.js +111 -30
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +111 -30
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +59 -1
- package/dist/react.d.ts +59 -1
- package/dist/react.js +111 -30
- package/dist/react.js.map +1 -1
- package/dist/theme.css +142 -0
- package/docs/components.json +119 -1
- package/package.json +1 -1
package/dist/react.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var D=Object.defineProperty;var Ge=Object.getOwnPropertyDescriptor;var Ie=Object.getOwnPropertyNames;var Oe=Object.prototype.hasOwnProperty;var C=e=>{throw TypeError(e)};var Me=(e,t)=>{for(var r in t)D(e,r,{get:t[r],enumerable:!0})},De=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of Ie(t))!Oe.call(e,a)&&a!==r&&D(e,a,{get:()=>t[a],enumerable:!(s=Ge(t,a))||s.enumerable});return e};var Ce=e=>De(D({},"__esModule",{value:!0}),e);var Z=(e,t,r)=>t.has(e)||C("Cannot "+r);var H=(e,t,r)=>(Z(e,t,"read from private field"),r?r.call(e):t.get(e)),B=(e,t,r)=>t.has(e)?C("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,r),W=(e,t,r,s)=>(Z(e,t,"write to private field"),s?s.call(e,r):t.set(e,r),r);var zt={};Me(zt,{ArcSpinner:()=>ve,BouncingDots:()=>me,BreathingPulse:()=>Te,DotGridWave:()=>ue,Ellipsis:()=>Ne,Equalizer:()=>ke,Eyes:()=>Ae,HelixDots:()=>he,IndeterminateProgressBar:()=>_e,MaterialDoubleArc:()=>ge,MorphingSquare:()=>we,OrbitDots:()=>xe,OrbitRingDots:()=>ye,ProgressBar:()=>Pe,ProgressRing:()=>Ee,ScanSweep:()=>be,SkeletonCard:()=>Le,SkeletonList:()=>Re,SkeletonShimmer:()=>Se,TypingDots:()=>ze,WaveDots:()=>fe,defineAll:()=>M});module.exports=Ce(zt);var Ze=`
|
|
2
2
|
@keyframes lz-spin { to { transform: rotate(360deg); } }
|
|
3
3
|
@keyframes lz-spin-reverse { to { transform: rotate(-360deg); } }
|
|
4
4
|
@keyframes lz-dot-bounce {
|
|
@@ -59,7 +59,12 @@
|
|
|
59
59
|
50% { transform: scale(1); opacity: 1; }
|
|
60
60
|
100% { transform: scale(var(--lz-grid-min, 0.3)); opacity: var(--lz-grid-fade, 0.15); }
|
|
61
61
|
}
|
|
62
|
-
|
|
62
|
+
@keyframes lz-ellipsis-dot {
|
|
63
|
+
0%, 20% { opacity: var(--lz-ellipsis-fade, 0.15); transform: scale(var(--lz-ellipsis-min, 0.8)); }
|
|
64
|
+
40%, 80% { opacity: 1; transform: scale(1); }
|
|
65
|
+
100% { opacity: var(--lz-ellipsis-fade, 0.15); transform: scale(var(--lz-ellipsis-min, 0.8)); }
|
|
66
|
+
}
|
|
67
|
+
`,Y=`
|
|
63
68
|
:host {
|
|
64
69
|
display: inline-flex;
|
|
65
70
|
font-size: var(--lz-size, 44px);
|
|
@@ -68,9 +73,9 @@
|
|
|
68
73
|
.lz-root {
|
|
69
74
|
display: contents;
|
|
70
75
|
}
|
|
71
|
-
${
|
|
72
|
-
`;var
|
|
73
|
-
${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".lz-root"),
|
|
76
|
+
${Ze}
|
|
77
|
+
`;var He=typeof HTMLElement<"u",Be=He?HTMLElement:class{},z,o=class extends Be{constructor(){super(...arguments);B(this,z,!1)}connectedCallback(){let r=this.shadowRoot??this.attachShadow({mode:"open"});r.innerHTML=`<style>${Y}
|
|
78
|
+
${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".lz-root"),W(this,z,!0),this.paint()}attributeChangedCallback(){H(this,z)&&this.paint()}paint(){this.sync();let r=this._rootEl;r&&(r.innerHTML=this.template())}num(r,s){let a=this.getAttribute(r);if(a===null||a==="")return s;let i=Number(a);return Number.isFinite(i)?i:s}varPx(r,s,a){let i=this.getAttribute(s);i!==null&&i!==""&&Number.isFinite(Number(i))?this.style.setProperty(r,`${Number(i)}px`):this.style.removeProperty(r)}varNum(r,s,a){let i=this.getAttribute(s);i!==null&&i!==""&&Number.isFinite(Number(i))?this.style.setProperty(r,String(Number(i))):this.style.removeProperty(r)}varRaw(r,s,a){let i=this.getAttribute(s);i!==null&&i!==""?this.style.setProperty(r,i):this.style.removeProperty(r)}};z=new WeakMap,o.observedAttributes=[];function l(e,t){typeof customElements>"u"||customElements.get(e)||customElements.define(e,t)}var We="lz-bouncing-dots",f=class extends o{constructor(){super(...arguments);this.css=`
|
|
74
79
|
:host { font-size: var(--lz-size, 8px); }
|
|
75
80
|
.lz-dots { display: flex; gap: 0.7em; }
|
|
76
81
|
.lz-dot {
|
|
@@ -80,7 +85,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
80
85
|
}
|
|
81
86
|
.lz-dot:nth-child(2) { animation-delay: 0.15s; }
|
|
82
87
|
.lz-dot:nth-child(3) { animation-delay: 0.3s; }
|
|
83
|
-
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
88
|
+
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};f.observedAttributes=["size","color","speed"];function $(){l(We,f)}var Ye="lz-typing-dots",h=class extends o{constructor(){super(...arguments);this.css=`
|
|
84
89
|
:host { font-size: var(--lz-size, 8px); }
|
|
85
90
|
.lz-dots { display: flex; gap: 0.8em; }
|
|
86
91
|
.lz-dot {
|
|
@@ -90,7 +95,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
90
95
|
}
|
|
91
96
|
.lz-dot:nth-child(2) { animation-delay: -0.18s; }
|
|
92
97
|
.lz-dot:nth-child(3) { animation-delay: -0.36s; }
|
|
93
|
-
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
98
|
+
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};h.observedAttributes=["size","color","speed"];function q(){l(Ye,h)}var $e="lz-wave-dots",u=class extends o{constructor(){super(...arguments);this.css=`
|
|
94
99
|
:host { font-size: var(--lz-size, 8px); }
|
|
95
100
|
.lz-dots { display: flex; gap: 0.6em; }
|
|
96
101
|
.lz-dot {
|
|
@@ -101,7 +106,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
101
106
|
.lz-dot:nth-child(2) { animation-delay: -0.1s; }
|
|
102
107
|
.lz-dot:nth-child(3) { animation-delay: -0.2s; }
|
|
103
108
|
.lz-dot:nth-child(4) { animation-delay: -0.3s; }
|
|
104
|
-
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
109
|
+
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};u.observedAttributes=["size","color","speed"];function U(){l($e,u)}var qe="lz-helix-dots",Ue=1.4,v=class extends o{constructor(){super(...arguments);this.css=`
|
|
105
110
|
:host { font-size: var(--lz-size, 6px); }
|
|
106
111
|
.lz-dots { display: flex; gap: 0.9em; }
|
|
107
112
|
.lz-dot {
|
|
@@ -109,7 +114,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
109
114
|
background: var(--lz-color, #f5f5f7);
|
|
110
115
|
animation: lz-helix-bob calc(1.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
111
116
|
}
|
|
112
|
-
`}template(){let r=Math.max(1,this.num("count",10)),s='<div class="lz-dots" role="status" aria-label="Loading">';for(let a=0;a<r;a++)s+=`<span class="lz-dot" style="animation-delay:-${(
|
|
117
|
+
`}template(){let r=Math.max(1,this.num("count",10)),s='<div class="lz-dots" role="status" aria-label="Loading">';for(let a=0;a<r;a++)s+=`<span class="lz-dot" style="animation-delay:-${(Ue/r*a).toFixed(3)}s"></span>`;return`${s}</div>`}sync(){this.varPx("--lz-size","size",6),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};v.observedAttributes=["size","count","color","speed"];function K(){l(qe,v)}var Ke="lz-dot-grid-wave",g=class extends o{constructor(){super(...arguments);this.css=`
|
|
113
118
|
:host { font-size: var(--lz-size, 6px); }
|
|
114
119
|
.lz-grid {
|
|
115
120
|
display: grid;
|
|
@@ -121,10 +126,10 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
121
126
|
background: var(--lz-color, #f5f5f7);
|
|
122
127
|
animation: lz-grid-dot-wave calc(1.2s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
123
128
|
}
|
|
124
|
-
`}template(){let r=Math.max(1,this.num("rows",4)),s=Math.max(1,this.num("cols",5)),a='<div class="lz-grid" role="status" aria-label="Loading">';for(let
|
|
129
|
+
`}template(){let r=Math.max(1,this.num("rows",4)),s=Math.max(1,this.num("cols",5)),a='<div class="lz-grid" role="status" aria-label="Loading">';for(let i=0;i<r;i++)for(let n=0;n<s;n++)a+=`<span class="lz-dot" style="animation-delay:-${((i+n)*.08).toFixed(3)}s"></span>`;return`${a}</div>`}sync(){this.varPx("--lz-size","size",6),this.varNum("--lz-cols","cols",5),this.varPx("--lz-grid-gap","gap",12),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};g.observedAttributes=["rows","cols","size","gap","color","speed"];function X(){l(Ke,g)}var Xe="lz-arc-spinner",Qe=`
|
|
125
130
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
126
131
|
mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
127
|
-
`,
|
|
132
|
+
`,b=class extends o{constructor(){super(...arguments);this.css=`
|
|
128
133
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; }
|
|
129
134
|
.lz-ring {
|
|
130
135
|
width: 100%; height: 100%; border-radius: 50%;
|
|
@@ -134,28 +139,28 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
134
139
|
var(--lz-color, #f5f5f7) 110deg,
|
|
135
140
|
transparent 111deg
|
|
136
141
|
);
|
|
137
|
-
${
|
|
142
|
+
${Qe}
|
|
138
143
|
animation: lz-spin calc(1s * var(--lz-speed, 1)) linear infinite;
|
|
139
144
|
}
|
|
140
|
-
`}template(){return'<div class="lz-ring" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
145
|
+
`}template(){return'<div class="lz-ring" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};b.observedAttributes=["size","stroke-width","color","speed"];function Q(){l(Xe,b)}var Ve="lz-material-double-arc",Fe=`
|
|
141
146
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
142
147
|
mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
143
|
-
`,
|
|
148
|
+
`,x="var(--lz-color-weak, color-mix(in srgb, var(--lz-color, #f5f5f7) 95%, transparent))",y=class extends o{constructor(){super(...arguments);this.css=`
|
|
144
149
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
145
150
|
.lz-arc {
|
|
146
151
|
position: absolute; inset: 0; border-radius: 50%;
|
|
147
|
-
${
|
|
152
|
+
${Fe}
|
|
148
153
|
}
|
|
149
154
|
.lz-arc-a {
|
|
150
|
-
background: conic-gradient(from 0deg, ${
|
|
155
|
+
background: conic-gradient(from 0deg, ${x} 0deg, ${x} 135deg, transparent 136deg);
|
|
151
156
|
animation: lz-spin calc(1s * var(--lz-speed, 1)) linear infinite;
|
|
152
157
|
}
|
|
153
158
|
.lz-arc-b {
|
|
154
159
|
opacity: 0.6;
|
|
155
|
-
background: conic-gradient(from 200deg, ${
|
|
160
|
+
background: conic-gradient(from 200deg, ${x} 0deg, ${x} 90deg, transparent 91deg);
|
|
156
161
|
animation: lz-spin-reverse calc(2.4s * var(--lz-speed, 1)) linear infinite;
|
|
157
162
|
}
|
|
158
|
-
`}template(){return'<div class="lz-arc lz-arc-a" role="status" aria-label="Loading"></div><div class="lz-arc lz-arc-b"></div>'}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varNum("--lz-speed","speed",1)}};
|
|
163
|
+
`}template(){return'<div class="lz-arc lz-arc-a" role="status" aria-label="Loading"></div><div class="lz-arc lz-arc-b"></div>'}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varNum("--lz-speed","speed",1)}};y.observedAttributes=["size","stroke-width","color","speed"];function V(){l(Ve,y)}var Je="lz-scan-sweep",A=class extends o{constructor(){super(...arguments);this.css=`
|
|
159
164
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
160
165
|
.lz-ring {
|
|
161
166
|
position: absolute; inset: 0; border-radius: 50%;
|
|
@@ -182,7 +187,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
182
187
|
mask: radial-gradient(closest-side, #000 100%);
|
|
183
188
|
animation: lz-spin calc(2.5s * var(--lz-speed, 1)) linear infinite;
|
|
184
189
|
}
|
|
185
|
-
`}template(){return'<div class="lz-ring" role="status" aria-label="Loading"></div><div class="lz-ring-inner"></div><div class="lz-core"></div><div class="lz-sweep"></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varRaw("--lz-color-sweep","color-sweep"),this.varNum("--lz-speed","speed",1)}};
|
|
190
|
+
`}template(){return'<div class="lz-ring" role="status" aria-label="Loading"></div><div class="lz-ring-inner"></div><div class="lz-core"></div><div class="lz-sweep"></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varRaw("--lz-color-sweep","color-sweep"),this.varNum("--lz-speed","speed",1)}};A.observedAttributes=["size","color","speed"];function F(){l(Je,A)}var je="lz-orbit-dots",w=class extends o{constructor(){super(...arguments);this.css=`
|
|
186
191
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
187
192
|
.lz-orbit {
|
|
188
193
|
position: absolute; inset: 0;
|
|
@@ -197,7 +202,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
197
202
|
.lz-dot:nth-child(1) { transform: rotate(0deg) translateY(-0.36em); }
|
|
198
203
|
.lz-dot:nth-child(2) { transform: rotate(120deg) translateY(-0.36em); }
|
|
199
204
|
.lz-dot:nth-child(3) { transform: rotate(240deg) translateY(-0.36em); }
|
|
200
|
-
`}template(){return'<div class="lz-orbit" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varNum("--lz-speed","speed",1)}};
|
|
205
|
+
`}template(){return'<div class="lz-orbit" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varNum("--lz-speed","speed",1)}};w.observedAttributes=["size","color","speed"];function J(){l(je,w)}var et="lz-orbit-ring-dots",j=8,T=class extends o{constructor(){super(...arguments);this.css=`
|
|
201
206
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
202
207
|
.lz-orbit { position: absolute; inset: 0; }
|
|
203
208
|
.lz-dot {
|
|
@@ -208,7 +213,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
208
213
|
background: var(--lz-color, #f5f5f7);
|
|
209
214
|
animation: lz-orbit-ring-dot calc(1.2s * var(--lz-speed, 1)) linear infinite;
|
|
210
215
|
}
|
|
211
|
-
`}template(){let r='<div class="lz-orbit" role="status" aria-label="Loading">';for(let s=0;s<
|
|
216
|
+
`}template(){let r='<div class="lz-orbit" role="status" aria-label="Loading">';for(let s=0;s<j;s++){let a=360/j*s;r+=`<span class="lz-dot" style="transform:rotate(${a}deg) translateY(calc(-0.5em + (var(--lz-dot-size, 0.18em) / 2)));animation-delay:-${(s*.15).toFixed(2)}s"></span>`}return`${r}</div>`}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-dot-size","dot-size",7.92),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};T.observedAttributes=["size","dot-size","color","speed"];function ee(){l(et,T)}var tt="lz-eyes",k=class extends o{constructor(){super(...arguments);this.css=`
|
|
212
217
|
:host { font-size: var(--lz-size, 44px); }
|
|
213
218
|
.lz-eyes { display: flex; gap: 0.24em; }
|
|
214
219
|
.lz-eye {
|
|
@@ -222,7 +227,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
222
227
|
background: var(--lz-pupil, rgba(0, 0, 0, 0.85));
|
|
223
228
|
animation: lz-eye-gaze calc(1.6s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
224
229
|
}
|
|
225
|
-
`}template(){return'<div class="lz-eyes" role="status" aria-label="Loading"><div class="lz-eye"><span class="lz-pupil"></span></div><div class="lz-eye"><span class="lz-pupil"></span></div></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-pupil","pupil"),this.varNum("--lz-speed","speed",1)}};
|
|
230
|
+
`}template(){return'<div class="lz-eyes" role="status" aria-label="Loading"><div class="lz-eye"><span class="lz-pupil"></span></div><div class="lz-eye"><span class="lz-pupil"></span></div></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-pupil","pupil"),this.varNum("--lz-speed","speed",1)}};k.observedAttributes=["size","color","speed"];function te(){l(tt,k)}var rt="lz-morphing-square",E=class extends o{constructor(){super(...arguments);this.css=`
|
|
226
231
|
:host {
|
|
227
232
|
font-size: var(--lz-size, 44px);
|
|
228
233
|
width: 1em; height: 1em;
|
|
@@ -230,14 +235,14 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
230
235
|
box-shadow: 0 0 calc(0.41 * var(--lz-size, 44px)) var(--lz-glow, color-mix(in srgb, var(--lz-accent, #0a84ff) 35%, transparent));
|
|
231
236
|
animation: lz-shape-morph calc(2s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
232
237
|
}
|
|
233
|
-
`}template(){return'<div role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-glow","glow"),this.varNum("--lz-speed","speed",1)}};
|
|
238
|
+
`}template(){return'<div role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-glow","glow"),this.varNum("--lz-speed","speed",1)}};E.observedAttributes=["size","accent","speed"];function re(){l(rt,E)}var st="lz-breathing-pulse",_=class extends o{constructor(){super(...arguments);this.css=`
|
|
234
239
|
:host {
|
|
235
240
|
font-size: var(--lz-size, 36px);
|
|
236
241
|
width: 1em; height: 1em; border-radius: 50%;
|
|
237
242
|
background: var(--lz-color, #f5f5f7);
|
|
238
243
|
animation: lz-pulse-breath calc(2.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
239
244
|
}
|
|
240
|
-
`}template(){return'<div role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",36),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
245
|
+
`}template(){return'<div role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",36),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};_.observedAttributes=["size","color","speed"];function se(){l(st,_)}var at="lz-equalizer",S=class extends o{constructor(){super(...arguments);this.css=`
|
|
241
246
|
:host { font-size: var(--lz-size, 22px); }
|
|
242
247
|
.lz-eq { display: flex; align-items: flex-end; gap: var(--lz-gap, 3px); }
|
|
243
248
|
.lz-bar {
|
|
@@ -250,12 +255,12 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
250
255
|
.lz-bar:nth-child(2) { animation-delay: 0.12s; }
|
|
251
256
|
.lz-bar:nth-child(3) { animation-delay: 0.24s; }
|
|
252
257
|
.lz-bar:nth-child(4) { animation-delay: 0.36s; }
|
|
253
|
-
`}template(){return'<div class="lz-eq" role="status" aria-label="Loading"><span class="lz-bar"></span><span class="lz-bar"></span><span class="lz-bar"></span><span class="lz-bar"></span></div>'}sync(){this.varPx("--lz-size","size",22),this.varPx("--lz-bar-width","bar-width",3),this.varPx("--lz-gap","gap",3),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
258
|
+
`}template(){return'<div class="lz-eq" role="status" aria-label="Loading"><span class="lz-bar"></span><span class="lz-bar"></span><span class="lz-bar"></span><span class="lz-bar"></span></div>'}sync(){this.varPx("--lz-size","size",22),this.varPx("--lz-bar-width","bar-width",3),this.varPx("--lz-gap","gap",3),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};S.observedAttributes=["size","bar-width","gap","color","speed"];function ae(){l(at,S)}var it="lz-progress-ring",ot=`
|
|
254
259
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
255
260
|
mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
256
|
-
`,N=class extends
|
|
261
|
+
`,N=class extends o{constructor(){super(...arguments);this.css=`
|
|
257
262
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
258
|
-
.lz-ring { position: absolute; inset: 0; border-radius: 50%; ${
|
|
263
|
+
.lz-ring { position: absolute; inset: 0; border-radius: 50%; ${ot} }
|
|
259
264
|
.lz-track {
|
|
260
265
|
background: conic-gradient(var(--lz-track, rgba(255, 255, 255, 0.15)) 0deg, var(--lz-track, rgba(255, 255, 255, 0.15)) 360deg);
|
|
261
266
|
}
|
|
@@ -263,7 +268,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
263
268
|
background: conic-gradient(var(--lz-color, #f5f5f7) calc(var(--lz-percent, 0) * 3.6deg), transparent 0deg);
|
|
264
269
|
transition: background 0.2s ease;
|
|
265
270
|
}
|
|
266
|
-
`}template(){return`<div class="lz-ring lz-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${Math.max(0,Math.min(100,this.num("percent",0)))}"></div><div class="lz-ring lz-fill"></div>`}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-track","track-color"),this.varNum("--lz-speed","speed",1),this.varNum("--lz-percent","percent",0)}};N.observedAttributes=["size","stroke-width","percent","color","track-color","speed"];function
|
|
271
|
+
`}template(){return`<div class="lz-ring lz-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${Math.max(0,Math.min(100,this.num("percent",0)))}"></div><div class="lz-ring lz-fill"></div>`}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-track","track-color"),this.varNum("--lz-speed","speed",1),this.varNum("--lz-percent","percent",0)}};N.observedAttributes=["size","stroke-width","percent","color","track-color","speed"];function ie(){l(it,N)}var lt="lz-indeterminate-progress-bar",P=class extends o{constructor(){super(...arguments);this.css=`
|
|
267
272
|
:host {
|
|
268
273
|
position: relative; display: inline-block;
|
|
269
274
|
width: var(--lz-width, 160px); height: var(--lz-height, 6px);
|
|
@@ -276,7 +281,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
276
281
|
background: var(--lz-accent, #0a84ff);
|
|
277
282
|
animation: lz-indeterminate-slide calc(1.6s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
278
283
|
}
|
|
279
|
-
`}template(){return'<div class="lz-bar" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-width","width",160),this.varPx("--lz-height","height",6),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varNum("--lz-speed","speed",1)}};P.observedAttributes=["width","height","accent","track-color","speed"];function
|
|
284
|
+
`}template(){return'<div class="lz-bar" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-width","width",160),this.varPx("--lz-height","height",6),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varNum("--lz-speed","speed",1)}};P.observedAttributes=["width","height","accent","track-color","speed"];function oe(){l(lt,P)}var nt="lz-skeleton-shimmer",L=class extends o{constructor(){super(...arguments);this.css=`
|
|
280
285
|
:host {
|
|
281
286
|
position: relative; display: inline-block;
|
|
282
287
|
width: var(--lz-width, 120px); height: var(--lz-height, 28px);
|
|
@@ -288,5 +293,81 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
288
293
|
background: linear-gradient(to right, transparent, var(--lz-sheen, rgba(255, 255, 255, 0.1)), transparent);
|
|
289
294
|
animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
|
|
290
295
|
}
|
|
291
|
-
`}template(){return'<div class="lz-sheen" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-width","width",120),this.varPx("--lz-height","height",28),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varRaw("--lz-sheen","sheen"),this.varNum("--lz-speed","speed",1)}};
|
|
296
|
+
`}template(){return'<div class="lz-sheen" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-width","width",120),this.varPx("--lz-height","height",28),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varRaw("--lz-sheen","sheen"),this.varNum("--lz-speed","speed",1)}};L.observedAttributes=["width","height","track-color","speed"];function le(){l(nt,L)}var dt="lz-ellipsis",R=class extends o{constructor(){super(...arguments);this.css=`
|
|
297
|
+
:host {
|
|
298
|
+
display: inline-flex; gap: 0.2em; align-items: center;
|
|
299
|
+
font-size: var(--lz-size, 8px); line-height: 1;
|
|
300
|
+
}
|
|
301
|
+
.lz-dot {
|
|
302
|
+
width: 1em; height: 1em; border-radius: 50%;
|
|
303
|
+
background: var(--lz-color, #f5f5f7);
|
|
304
|
+
animation: lz-ellipsis-dot calc(1.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
305
|
+
}
|
|
306
|
+
.lz-dot:nth-child(2) { animation-delay: -0.45s; }
|
|
307
|
+
.lz-dot:nth-child(3) { animation-delay: -0.9s; }
|
|
308
|
+
`}template(){return'<span class="lz-dot" role="status" aria-label="Loading"></span><span class="lz-dot"></span><span class="lz-dot"></span>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};R.observedAttributes=["size","color","speed"];function ne(){l(dt,R)}var ct="lz-progress-bar",G=class extends o{constructor(){super(...arguments);this.css=`
|
|
309
|
+
:host {
|
|
310
|
+
display: inline-block; position: relative;
|
|
311
|
+
width: var(--lz-width, 160px); height: var(--lz-height, 6px);
|
|
312
|
+
border-radius: calc(var(--lz-height, 6px) / 2);
|
|
313
|
+
overflow: hidden;
|
|
314
|
+
background: var(--lz-track, rgba(255,255,255,0.15));
|
|
315
|
+
}
|
|
316
|
+
.lz-fill {
|
|
317
|
+
position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
|
|
318
|
+
transform-origin: left;
|
|
319
|
+
background: var(--lz-color, #f5f5f7);
|
|
320
|
+
border-radius: inherit;
|
|
321
|
+
}
|
|
322
|
+
`}template(){return'<div class="lz-fill"></div>'}sync(){this.varPx("--lz-width","width",160),this.varPx("--lz-height","height",6),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-track","track-color","rgba(255,255,255,0.15)"),this.varNum("--lz-speed","speed",1);let r=Math.max(0,Math.min(100,this.num("percent",0)));this.style.setProperty("--lz-percent",`${r}`);let s=this.shadowRoot?.querySelector(".lz-fill");s&&(s.style.transform=`scaleX(${r/100})`),this.setAttribute("aria-valuenow",String(r))}};G.observedAttributes=["width","height","percent","color","track-color","speed"];function de(){l(ct,G)}var pt="lz-skeleton-card",I=class extends o{constructor(){super(...arguments);this.css=`
|
|
323
|
+
:host {
|
|
324
|
+
position: relative; display: inline-block;
|
|
325
|
+
width: var(--lz-width, 200px); height: var(--lz-height, 64px);
|
|
326
|
+
border-radius: var(--lz-radius, 10px); overflow: hidden;
|
|
327
|
+
background: var(--lz-surface, #1c1c1e);
|
|
328
|
+
}
|
|
329
|
+
.lz-card-row {
|
|
330
|
+
display: flex; gap: 10px; padding: 12px;
|
|
331
|
+
}
|
|
332
|
+
.lz-avatar {
|
|
333
|
+
width: 40px; height: 40px; border-radius: 50%;
|
|
334
|
+
background: rgba(255,255,255,0.08); flex-shrink: 0;
|
|
335
|
+
}
|
|
336
|
+
.lz-lines { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
|
|
337
|
+
.lz-line {
|
|
338
|
+
height: 8px; border-radius: 4px;
|
|
339
|
+
background: rgba(255,255,255,0.08);
|
|
340
|
+
}
|
|
341
|
+
.lz-line-short { width: 60%; }
|
|
342
|
+
.lz-sheen {
|
|
343
|
+
position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
|
|
344
|
+
background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
|
|
345
|
+
animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
|
|
346
|
+
}
|
|
347
|
+
`}template(){return'<div class="lz-card-row" role="status" aria-label="Loading"><div class="lz-avatar"></div><div class="lz-lines"><div class="lz-line"></div><div class="lz-line lz-line-short"></div><div class="lz-line" style="width:80%"></div></div></div><div class="lz-sheen"></div>'}sync(){this.varPx("--lz-width","width",200),this.varPx("--lz-height","height",64),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varNum("--lz-speed","speed",1)}};I.observedAttributes=["width","height","track-color","speed"];function ce(){l(pt,I)}var mt="lz-skeleton-list",O=class extends o{constructor(){super(...arguments);this.css=`
|
|
348
|
+
:host {
|
|
349
|
+
position: relative; display: block;
|
|
350
|
+
width: var(--lz-width, 180px);
|
|
351
|
+
border-radius: var(--lz-radius, 10px); overflow: hidden;
|
|
352
|
+
background: var(--lz-surface, #1c1c1e);
|
|
353
|
+
}
|
|
354
|
+
.lz-list-row {
|
|
355
|
+
display: flex; align-items: center; gap: 8px;
|
|
356
|
+
padding: 8px 12px;
|
|
357
|
+
}
|
|
358
|
+
.lz-list-avatar {
|
|
359
|
+
width: 28px; height: 28px; border-radius: 50%;
|
|
360
|
+
background: rgba(255,255,255,0.08); flex-shrink: 0;
|
|
361
|
+
}
|
|
362
|
+
.lz-list-line {
|
|
363
|
+
height: 8px; border-radius: 4px;
|
|
364
|
+
background: rgba(255,255,255,0.08); flex: 1;
|
|
365
|
+
}
|
|
366
|
+
.lz-list-line-fixed { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); }
|
|
367
|
+
.lz-sheen {
|
|
368
|
+
position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
|
|
369
|
+
background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
|
|
370
|
+
animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
|
|
371
|
+
}
|
|
372
|
+
`}template(){let r=Math.max(1,Math.min(8,this.num("rows",4))),s=["100%","85%","92%","68%","95%","78%","88%","72%"],a='<div role="status" aria-label="Loading">';for(let i=0;i<r;i++){let n=s[i%s.length];a+=`<div class="lz-list-row"><div class="lz-list-avatar"></div><div class="lz-list-line" style="width:${n}"></div></div>`}return`${a}</div><div class="lz-sheen"></div>`}sync(){this.varPx("--lz-width","width",180),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varNum("--lz-speed","speed",1)}};O.observedAttributes=["width","rows","track-color","speed"];function pe(){l(mt,O)}function M(){$(),q(),U(),K(),X(),Q(),V(),F(),J(),ee(),te(),re(),se(),ae(),ie(),oe(),le(),ne(),de(),ce(),pe()}var d=require("react/jsx-runtime");M();var c=(e,t)=>t===void 0?{}:{[e]:String(t)};function me(e){let{size:t,color:r,speed:s,className:a,style:i}=e;return(0,d.jsx)("lz-bouncing-dots",{size:t,color:r,speed:s,className:a,style:i})}me.displayName="BouncingDots";function ze(e){let{size:t,color:r,speed:s,className:a,style:i}=e;return(0,d.jsx)("lz-typing-dots",{size:t,color:r,speed:s,className:a,style:i})}ze.displayName="TypingDots";function fe(e){let{size:t,color:r,speed:s,className:a,style:i}=e;return(0,d.jsx)("lz-wave-dots",{size:t,color:r,speed:s,className:a,style:i})}fe.displayName="WaveDots";function he(e){let{size:t,color:r,speed:s,count:a,className:i,style:n}=e;return(0,d.jsx)("lz-helix-dots",{size:t,color:r,speed:s,count:a,className:i,style:n})}he.displayName="HelixDots";function ue(e){let{rows:t,cols:r,gap:s,size:a,color:i,speed:n,className:p,style:m}=e;return(0,d.jsx)("lz-dot-grid-wave",{rows:t,cols:r,gap:s,size:a,color:i,speed:n,className:p,style:m})}ue.displayName="DotGridWave";function ve(e){let{size:t,color:r,speed:s,strokeWidth:a,className:i,style:n}=e;return(0,d.jsx)("lz-arc-spinner",{size:t,color:r,speed:s,className:i,style:n,...c("stroke-width",a)})}ve.displayName="ArcSpinner";function ge(e){let{size:t,color:r,colorWeak:s,speed:a,strokeWidth:i,className:n,style:p}=e;return(0,d.jsx)("lz-material-double-arc",{size:t,color:r,speed:a,className:n,style:p,...c("stroke-width",i),...c("color-weak",s)})}ge.displayName="MaterialDoubleArc";function be(e){let{size:t,color:r,colorWeak:s,colorSweep:a,speed:i,className:n,style:p}=e;return(0,d.jsx)("lz-scan-sweep",{size:t,color:r,speed:i,className:n,style:p,...c("color-weak",s),...c("color-sweep",a)})}be.displayName="ScanSweep";function xe(e){let{size:t,color:r,speed:s,className:a,style:i}=e;return(0,d.jsx)("lz-orbit-dots",{size:t,color:r,speed:s,className:a,style:i})}xe.displayName="OrbitDots";function ye(e){let{size:t,color:r,speed:s,dotSize:a,className:i,style:n}=e;return(0,d.jsx)("lz-orbit-ring-dots",{size:t,color:r,speed:s,className:i,style:n,...c("dot-size",a)})}ye.displayName="OrbitRingDots";function Ae(e){let{size:t,color:r,speed:s,className:a,style:i}=e;return(0,d.jsx)("lz-eyes",{size:t,color:r,speed:s,className:a,style:i})}Ae.displayName="Eyes";function we(e){let{size:t,accent:r,speed:s,className:a,style:i}=e;return(0,d.jsx)("lz-morphing-square",{size:t,accent:r,speed:s,className:a,style:i})}we.displayName="MorphingSquare";function Te(e){let{size:t,color:r,speed:s,className:a,style:i}=e;return(0,d.jsx)("lz-breathing-pulse",{size:t,color:r,speed:s,className:a,style:i})}Te.displayName="BreathingPulse";function ke(e){let{size:t,color:r,speed:s,barWidth:a,gap:i,className:n,style:p}=e;return(0,d.jsx)("lz-equalizer",{size:t,color:r,speed:s,className:n,style:p,...c("bar-width",a),...c("gap",i)})}ke.displayName="Equalizer";function Ee(e){let{size:t,color:r,trackColor:s,speed:a,strokeWidth:i,percent:n,className:p,style:m}=e;return(0,d.jsx)("lz-progress-ring",{size:t,color:r,speed:a,percent:n,className:p,style:m,...c("stroke-width",i),...c("track-color",s)})}Ee.displayName="ProgressRing";function _e(e){let{width:t,height:r,accent:s,trackColor:a,speed:i,className:n,style:p}=e;return(0,d.jsx)("lz-indeterminate-progress-bar",{width:t,height:r,accent:s,speed:i,className:n,style:p,...c("track-color",a)})}_e.displayName="IndeterminateProgressBar";function Se(e){let{width:t,height:r,trackColor:s,speed:a,className:i,style:n}=e;return(0,d.jsx)("lz-skeleton-shimmer",{width:t,height:r,speed:a,className:i,style:n,...c("track-color",s)})}Se.displayName="SkeletonShimmer";function Ne(e){let{size:t,color:r,speed:s,className:a,style:i}=e;return(0,d.jsx)("lz-ellipsis",{size:t,color:r,speed:s,className:a,style:i})}Ne.displayName="Ellipsis";function Pe(e){let{width:t,height:r,percent:s,color:a,speed:i,trackColor:n,className:p,style:m}=e;return(0,d.jsx)("lz-progress-bar",{width:t,height:r,percent:s,color:a,speed:i,className:p,style:m,...c("track-color",n)})}Pe.displayName="ProgressBar";function Le(e){let{width:t,height:r,trackColor:s,speed:a,className:i,style:n}=e;return(0,d.jsx)("lz-skeleton-card",{width:t,height:r,speed:a,className:i,style:n,...c("track-color",s)})}Le.displayName="SkeletonCard";function Re(e){let{width:t,rows:r,trackColor:s,speed:a,className:i,style:n}=e;return(0,d.jsx)("lz-skeleton-list",{width:t,rows:r,speed:a,className:i,style:n,...c("track-color",s)})}Re.displayName="SkeletonList";0&&(module.exports={ArcSpinner,BouncingDots,BreathingPulse,DotGridWave,Ellipsis,Equalizer,Eyes,HelixDots,IndeterminateProgressBar,MaterialDoubleArc,MorphingSquare,OrbitDots,OrbitRingDots,ProgressBar,ProgressRing,ScanSweep,SkeletonCard,SkeletonList,SkeletonShimmer,TypingDots,WaveDots,defineAll});
|
|
292
373
|
//# sourceMappingURL=react.cjs.map
|