loading-state-zoo 0.3.0 → 0.4.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/README.md +38 -71
- package/dist/index.cjs +233 -172
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +11 -17
- package/dist/index.d.ts +11 -17
- package/dist/index.js +230 -169
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +230 -169
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +38 -48
- package/dist/react.d.ts +38 -48
- package/dist/react.js +230 -169
- package/dist/react.js.map +1 -1
- package/dist/theme.css +323 -226
- package/docs/AI.md +12 -10
- package/docs/components.json +69 -108
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -27,8 +27,8 @@ declare abstract class LZPattern extends Base {
|
|
|
27
27
|
/** Register a pattern element, silently skipping duplicates. */
|
|
28
28
|
declare function define(tag: string, ctor: CustomElementConstructor): void;
|
|
29
29
|
|
|
30
|
-
declare const KEYFRAMES = "\n@keyframes lz-spin { to { transform: rotate(360deg); } }\n@keyframes lz-spin-reverse { to { transform: rotate(-360deg); } }\n@keyframes lz-dot-bounce {\n 0% { transform: translateY(0); }\n 50% { transform: translateY(var(--lz-bounce, -10px)); }\n 100% { transform: translateY(0); }\n}\n@keyframes lz-eq-wave {\n 0% { transform: scaleY(var(--lz-eq-min, 0.3)); }\n 50% { transform: scaleY(1); }\n 100% { transform: scaleY(var(--lz-eq-min, 0.3)); }\n}\n@keyframes lz-typing-pulse {\n 0%, 100% { transform: scale(var(--lz-typing-min, 0.35)); }\n 50% { transform: scale(var(--lz-typing-peak, 1.15)); }\n}\n@keyframes lz-dot-wave {\n 0%, 100% { transform: scale(var(--lz-wave-min, 0.35)); }\n 40% { transform: scale(var(--lz-wave-peak, 1.1)); }\n}\n@keyframes lz-pulse-breath {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(var(--lz-breath, 1.14)); }\n}\n@keyframes lz-shape-morph {\n 0% { transform: rotate(0deg) scale(var(--lz-morph, 0.72)); border-radius: 50%; }\n 50% { transform: rotate(45deg) scale(1); border-radius: var(--lz-morph-radius, 17%); }\n 100% { transform: rotate(90deg) scale(var(--lz-morph, 0.72)); border-radius: 50%; }\n}\n@keyframes lz-eye-gaze {\n 0%, 100% { transform: translateX(var(--lz-gaze-from, -3px)); }\n 50% { transform: translateX(var(--lz-gaze-to, 3px)); }\n}\n@keyframes lz-eye-blink {\n 0%, 88%, 100% { transform: scaleY(1); }\n 93% { transform: scaleY(var(--lz-blink, 0.08)); }\n}\n@keyframes lz-skeleton-sheen {\n 0% { transform: translateX(var(--lz-sheen-from, -120%)); }\n 100% { transform: translateX(var(--lz-sheen-to, 220%)); }\n}\n@keyframes lz-orbit-ring-dot {\n 0% { opacity: var(--lz-orbit-fade, 0.12); }\n 50% { opacity: 1; }\n 90% { opacity: var(--lz-orbit-fade, 0.12); }\n 100% { opacity: var(--lz-orbit-fade, 0.12); }\n}\n@keyframes lz-indeterminate-slide {\n 0% { transform: translateX(var(--lz-slide-from, -100%)); }\n 100% { transform: translateX(var(--lz-slide-to, 300%)); }\n}\n@keyframes lz-helix-bob {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(var(--lz-helix, -12px)); }\n}\n@keyframes lz-grid-dot-wave {\n 0% { transform: scale(var(--lz-grid-min, 0.3)); opacity: var(--lz-grid-fade, 0.15); }\n 50% { transform: scale(1); opacity: 1; }\n 100% { transform: scale(var(--lz-grid-min, 0.3)); opacity: var(--lz-grid-fade, 0.15); }\n}\n@keyframes lz-ellipsis-dot {\n 0%, 20% { opacity: var(--lz-ellipsis-fade, 0.15); transform: scale(var(--lz-ellipsis-min, 0.8)); }\n 40%, 80% { opacity: 1; transform: scale(1); }\n 100% { opacity: var(--lz-ellipsis-fade, 0.15); transform: scale(var(--lz-ellipsis-min, 0.8)); }\n}\n@keyframes lz-orb-breathe {\n 0%, 100% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(var(--lz-orb-scale, 1.16)); opacity: var(--lz-orb-fade, 0.88); }\n}\n@keyframes lz-
|
|
31
|
-
declare const SCOPED_CSS = "\n:host {\n display: inline-flex;\n font-size: var(--lz-size, 44px);\n line-height: 1;\n}\n.lz-root {\n display: contents;\n}\n\n@keyframes lz-spin { to { transform: rotate(360deg); } }\n@keyframes lz-spin-reverse { to { transform: rotate(-360deg); } }\n@keyframes lz-dot-bounce {\n 0% { transform: translateY(0); }\n 50% { transform: translateY(var(--lz-bounce, -10px)); }\n 100% { transform: translateY(0); }\n}\n@keyframes lz-eq-wave {\n 0% { transform: scaleY(var(--lz-eq-min, 0.3)); }\n 50% { transform: scaleY(1); }\n 100% { transform: scaleY(var(--lz-eq-min, 0.3)); }\n}\n@keyframes lz-typing-pulse {\n 0%, 100% { transform: scale(var(--lz-typing-min, 0.35)); }\n 50% { transform: scale(var(--lz-typing-peak, 1.15)); }\n}\n@keyframes lz-dot-wave {\n 0%, 100% { transform: scale(var(--lz-wave-min, 0.35)); }\n 40% { transform: scale(var(--lz-wave-peak, 1.1)); }\n}\n@keyframes lz-pulse-breath {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(var(--lz-breath, 1.14)); }\n}\n@keyframes lz-shape-morph {\n 0% { transform: rotate(0deg) scale(var(--lz-morph, 0.72)); border-radius: 50%; }\n 50% { transform: rotate(45deg) scale(1); border-radius: var(--lz-morph-radius, 17%); }\n 100% { transform: rotate(90deg) scale(var(--lz-morph, 0.72)); border-radius: 50%; }\n}\n@keyframes lz-eye-gaze {\n 0%, 100% { transform: translateX(var(--lz-gaze-from, -3px)); }\n 50% { transform: translateX(var(--lz-gaze-to, 3px)); }\n}\n@keyframes lz-eye-blink {\n 0%, 88%, 100% { transform: scaleY(1); }\n 93% { transform: scaleY(var(--lz-blink, 0.08)); }\n}\n@keyframes lz-skeleton-sheen {\n 0% { transform: translateX(var(--lz-sheen-from, -120%)); }\n 100% { transform: translateX(var(--lz-sheen-to, 220%)); }\n}\n@keyframes lz-orbit-ring-dot {\n 0% { opacity: var(--lz-orbit-fade, 0.12); }\n 50% { opacity: 1; }\n 90% { opacity: var(--lz-orbit-fade, 0.12); }\n 100% { opacity: var(--lz-orbit-fade, 0.12); }\n}\n@keyframes lz-indeterminate-slide {\n 0% { transform: translateX(var(--lz-slide-from, -100%)); }\n 100% { transform: translateX(var(--lz-slide-to, 300%)); }\n}\n@keyframes lz-helix-bob {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(var(--lz-helix, -12px)); }\n}\n@keyframes lz-grid-dot-wave {\n 0% { transform: scale(var(--lz-grid-min, 0.3)); opacity: var(--lz-grid-fade, 0.15); }\n 50% { transform: scale(1); opacity: 1; }\n 100% { transform: scale(var(--lz-grid-min, 0.3)); opacity: var(--lz-grid-fade, 0.15); }\n}\n@keyframes lz-ellipsis-dot {\n 0%, 20% { opacity: var(--lz-ellipsis-fade, 0.15); transform: scale(var(--lz-ellipsis-min, 0.8)); }\n 40%, 80% { opacity: 1; transform: scale(1); }\n 100% { opacity: var(--lz-ellipsis-fade, 0.15); transform: scale(var(--lz-ellipsis-min, 0.8)); }\n}\n@keyframes lz-orb-breathe {\n 0%, 100% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(var(--lz-orb-scale, 1.16)); opacity: var(--lz-orb-fade, 0.88); }\n}\n@keyframes lz-
|
|
30
|
+
declare const KEYFRAMES = "\n@keyframes lz-spin { to { transform: rotate(360deg); } }\n@keyframes lz-spin-reverse { to { transform: rotate(-360deg); } }\n@keyframes lz-dot-bounce {\n 0% { transform: translateY(0); }\n 50% { transform: translateY(var(--lz-bounce, -10px)); }\n 100% { transform: translateY(0); }\n}\n@keyframes lz-eq-wave {\n 0% { transform: scaleY(var(--lz-eq-min, 0.3)); }\n 50% { transform: scaleY(1); }\n 100% { transform: scaleY(var(--lz-eq-min, 0.3)); }\n}\n@keyframes lz-typing-pulse {\n 0%, 100% { transform: scale(var(--lz-typing-min, 0.35)); }\n 50% { transform: scale(var(--lz-typing-peak, 1.15)); }\n}\n@keyframes lz-dot-wave {\n 0%, 100% { transform: scale(var(--lz-wave-min, 0.35)); }\n 40% { transform: scale(var(--lz-wave-peak, 1.1)); }\n}\n@keyframes lz-pulse-breath {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(var(--lz-breath, 1.14)); }\n}\n@keyframes lz-shape-morph {\n 0% { transform: rotate(0deg) scale(var(--lz-morph, 0.72)); border-radius: 50%; }\n 50% { transform: rotate(45deg) scale(1); border-radius: var(--lz-morph-radius, 17%); }\n 100% { transform: rotate(90deg) scale(var(--lz-morph, 0.72)); border-radius: 50%; }\n}\n@keyframes lz-eye-gaze {\n 0%, 100% { transform: translateX(var(--lz-gaze-from, -3px)); }\n 50% { transform: translateX(var(--lz-gaze-to, 3px)); }\n}\n@keyframes lz-eye-blink {\n 0%, 88%, 100% { transform: scaleY(1); }\n 93% { transform: scaleY(var(--lz-blink, 0.08)); }\n}\n@keyframes lz-skeleton-sheen {\n 0% { transform: translateX(var(--lz-sheen-from, -120%)); }\n 100% { transform: translateX(var(--lz-sheen-to, 220%)); }\n}\n@keyframes lz-orbit-ring-dot {\n 0% { opacity: var(--lz-orbit-fade, 0.12); }\n 50% { opacity: 1; }\n 90% { opacity: var(--lz-orbit-fade, 0.12); }\n 100% { opacity: var(--lz-orbit-fade, 0.12); }\n}\n@keyframes lz-indeterminate-slide {\n 0% { transform: translateX(var(--lz-slide-from, -100%)); }\n 100% { transform: translateX(var(--lz-slide-to, 300%)); }\n}\n@keyframes lz-helix-bob {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(var(--lz-helix, -12px)); }\n}\n@keyframes lz-grid-dot-wave {\n 0% { transform: scale(var(--lz-grid-min, 0.3)); opacity: var(--lz-grid-fade, 0.15); }\n 50% { transform: scale(1); opacity: 1; }\n 100% { transform: scale(var(--lz-grid-min, 0.3)); opacity: var(--lz-grid-fade, 0.15); }\n}\n@keyframes lz-ellipsis-dot {\n 0%, 20% { opacity: var(--lz-ellipsis-fade, 0.15); transform: scale(var(--lz-ellipsis-min, 0.8)); }\n 40%, 80% { opacity: 1; transform: scale(1); }\n 100% { opacity: var(--lz-ellipsis-fade, 0.15); transform: scale(var(--lz-ellipsis-min, 0.8)); }\n}\n@keyframes lz-orb-breathe {\n 0%, 100% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(var(--lz-orb-scale, 1.16)); opacity: var(--lz-orb-fade, 0.88); }\n}\n@keyframes lz-ios-glow {\n 0%, 100% { opacity: var(--lz-ios-fade, 0.2); transform: scale(var(--lz-ios-min, 0.5)); }\n 35% { opacity: 1; transform: scale(var(--lz-ios-peak, 1.25)); }\n 50% { opacity: 1; transform: scale(var(--lz-ios-peak, 1.25)); }\n}\n@keyframes lz-ai-sparkle {\n 0%, 100% { opacity: 0; transform: scale(0.1) rotate(0deg); }\n 20% { opacity: 1; transform: scale(1) rotate(8deg); }\n 45% { opacity: 0; transform: scale(1.35) rotate(14deg); }\n}\n@keyframes lz-waveform {\n 0%, 100% { transform: scaleY(var(--lz-wf-min, 0.22)); }\n 50% { transform: scaleY(1); }\n}\n@keyframes lz-sonar-ring {\n 0% { transform: scale(0.18); opacity: var(--lz-sonar-fade, 0.9); }\n 100% { transform: scale(1); opacity: 0; }\n}\n@keyframes lz-note-bob {\n 0%, 100% { transform: translateY(0); }\n 45% { transform: translateY(var(--lz-note-bob, 0.35em)); }\n 60% { transform: rotate(4deg) translateY(var(--lz-note-bob, 0.35em)); }\n 75% { transform: rotate(-4deg) translateY(var(--lz-note-bob, 0.35em)); }\n}\n@keyframes lz-needle-bob {\n 0%, 100% { transform: rotate(22deg); }\n 50% { transform: rotate(27deg); }\n}\n";
|
|
31
|
+
declare const SCOPED_CSS = "\n:host {\n display: inline-flex;\n font-size: var(--lz-size, 44px);\n line-height: 1;\n}\n.lz-root {\n display: contents;\n}\n\n@keyframes lz-spin { to { transform: rotate(360deg); } }\n@keyframes lz-spin-reverse { to { transform: rotate(-360deg); } }\n@keyframes lz-dot-bounce {\n 0% { transform: translateY(0); }\n 50% { transform: translateY(var(--lz-bounce, -10px)); }\n 100% { transform: translateY(0); }\n}\n@keyframes lz-eq-wave {\n 0% { transform: scaleY(var(--lz-eq-min, 0.3)); }\n 50% { transform: scaleY(1); }\n 100% { transform: scaleY(var(--lz-eq-min, 0.3)); }\n}\n@keyframes lz-typing-pulse {\n 0%, 100% { transform: scale(var(--lz-typing-min, 0.35)); }\n 50% { transform: scale(var(--lz-typing-peak, 1.15)); }\n}\n@keyframes lz-dot-wave {\n 0%, 100% { transform: scale(var(--lz-wave-min, 0.35)); }\n 40% { transform: scale(var(--lz-wave-peak, 1.1)); }\n}\n@keyframes lz-pulse-breath {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(var(--lz-breath, 1.14)); }\n}\n@keyframes lz-shape-morph {\n 0% { transform: rotate(0deg) scale(var(--lz-morph, 0.72)); border-radius: 50%; }\n 50% { transform: rotate(45deg) scale(1); border-radius: var(--lz-morph-radius, 17%); }\n 100% { transform: rotate(90deg) scale(var(--lz-morph, 0.72)); border-radius: 50%; }\n}\n@keyframes lz-eye-gaze {\n 0%, 100% { transform: translateX(var(--lz-gaze-from, -3px)); }\n 50% { transform: translateX(var(--lz-gaze-to, 3px)); }\n}\n@keyframes lz-eye-blink {\n 0%, 88%, 100% { transform: scaleY(1); }\n 93% { transform: scaleY(var(--lz-blink, 0.08)); }\n}\n@keyframes lz-skeleton-sheen {\n 0% { transform: translateX(var(--lz-sheen-from, -120%)); }\n 100% { transform: translateX(var(--lz-sheen-to, 220%)); }\n}\n@keyframes lz-orbit-ring-dot {\n 0% { opacity: var(--lz-orbit-fade, 0.12); }\n 50% { opacity: 1; }\n 90% { opacity: var(--lz-orbit-fade, 0.12); }\n 100% { opacity: var(--lz-orbit-fade, 0.12); }\n}\n@keyframes lz-indeterminate-slide {\n 0% { transform: translateX(var(--lz-slide-from, -100%)); }\n 100% { transform: translateX(var(--lz-slide-to, 300%)); }\n}\n@keyframes lz-helix-bob {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(var(--lz-helix, -12px)); }\n}\n@keyframes lz-grid-dot-wave {\n 0% { transform: scale(var(--lz-grid-min, 0.3)); opacity: var(--lz-grid-fade, 0.15); }\n 50% { transform: scale(1); opacity: 1; }\n 100% { transform: scale(var(--lz-grid-min, 0.3)); opacity: var(--lz-grid-fade, 0.15); }\n}\n@keyframes lz-ellipsis-dot {\n 0%, 20% { opacity: var(--lz-ellipsis-fade, 0.15); transform: scale(var(--lz-ellipsis-min, 0.8)); }\n 40%, 80% { opacity: 1; transform: scale(1); }\n 100% { opacity: var(--lz-ellipsis-fade, 0.15); transform: scale(var(--lz-ellipsis-min, 0.8)); }\n}\n@keyframes lz-orb-breathe {\n 0%, 100% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(var(--lz-orb-scale, 1.16)); opacity: var(--lz-orb-fade, 0.88); }\n}\n@keyframes lz-ios-glow {\n 0%, 100% { opacity: var(--lz-ios-fade, 0.2); transform: scale(var(--lz-ios-min, 0.5)); }\n 35% { opacity: 1; transform: scale(var(--lz-ios-peak, 1.25)); }\n 50% { opacity: 1; transform: scale(var(--lz-ios-peak, 1.25)); }\n}\n@keyframes lz-ai-sparkle {\n 0%, 100% { opacity: 0; transform: scale(0.1) rotate(0deg); }\n 20% { opacity: 1; transform: scale(1) rotate(8deg); }\n 45% { opacity: 0; transform: scale(1.35) rotate(14deg); }\n}\n@keyframes lz-waveform {\n 0%, 100% { transform: scaleY(var(--lz-wf-min, 0.22)); }\n 50% { transform: scaleY(1); }\n}\n@keyframes lz-sonar-ring {\n 0% { transform: scale(0.18); opacity: var(--lz-sonar-fade, 0.9); }\n 100% { transform: scale(1); opacity: 0; }\n}\n@keyframes lz-note-bob {\n 0%, 100% { transform: translateY(0); }\n 45% { transform: translateY(var(--lz-note-bob, 0.35em)); }\n 60% { transform: rotate(4deg) translateY(var(--lz-note-bob, 0.35em)); }\n 75% { transform: rotate(-4deg) translateY(var(--lz-note-bob, 0.35em)); }\n}\n@keyframes lz-needle-bob {\n 0%, 100% { transform: rotate(22deg); }\n 50% { transform: rotate(27deg); }\n}\n\n";
|
|
32
32
|
|
|
33
33
|
/**
|
|
34
34
|
* Register every pattern as a custom element.
|
|
@@ -99,23 +99,17 @@ declare function defineSkeletonCard(): void;
|
|
|
99
99
|
declare const SKELETON_LIST_TAG = "lz-skeleton-list";
|
|
100
100
|
declare function defineSkeletonList(): void;
|
|
101
101
|
|
|
102
|
-
declare const
|
|
103
|
-
declare function
|
|
102
|
+
declare const IOS27_ORB_TAG = "lz-ios-27-orb";
|
|
103
|
+
declare function defineIos27Orb(): void;
|
|
104
104
|
|
|
105
|
-
declare const
|
|
106
|
-
declare function
|
|
105
|
+
declare const AI_ORB_TAG = "lz-ai-orb";
|
|
106
|
+
declare function defineAiOrb(): void;
|
|
107
107
|
|
|
108
|
-
declare const
|
|
109
|
-
declare function
|
|
108
|
+
declare const AI_THINKING_TAG = "lz-ai-thinking";
|
|
109
|
+
declare function defineAiThinking(): void;
|
|
110
110
|
|
|
111
|
-
declare const
|
|
112
|
-
declare function
|
|
113
|
-
|
|
114
|
-
declare const PLANET_ORB_TAG = "lz-planet-orb";
|
|
115
|
-
declare function definePlanetOrb(): void;
|
|
116
|
-
|
|
117
|
-
declare const AURA_ORB_TAG = "lz-aura-orb";
|
|
118
|
-
declare function defineAuraOrb(): void;
|
|
111
|
+
declare const AI_NEURAL_TAG = "lz-ai-neural";
|
|
112
|
+
declare function defineAiNeural(): void;
|
|
119
113
|
|
|
120
114
|
declare const WAVEFORM_TAG = "lz-waveform";
|
|
121
115
|
declare function defineWaveform(): void;
|
|
@@ -132,4 +126,4 @@ declare function defineMusicNote(): void;
|
|
|
132
126
|
declare const ACTIVITY_RINGS_TAG = "lz-activity-rings";
|
|
133
127
|
declare function defineActivityRings(): void;
|
|
134
128
|
|
|
135
|
-
export { ACTIVITY_RINGS_TAG,
|
|
129
|
+
export { ACTIVITY_RINGS_TAG, AI_NEURAL_TAG, AI_ORB_TAG, AI_THINKING_TAG, ARC_SPINNER_TAG, BOUNCING_DOTS_TAG, BREATHING_PULSE_TAG, DOT_GRID_WAVE_TAG, ELLIPSIS_TAG, EQUALIZER_TAG, EYES_TAG, HELIX_DOTS_TAG, INDETERMINATE_PROGRESS_BAR_TAG, IOS27_ORB_TAG, KEYFRAMES, LZPattern, LZPattern as LoadingPattern, MATERIAL_DOUBLE_ARC_TAG, MORPHING_SQUARE_TAG, MUSIC_NOTE_TAG, ORBIT_DOTS_TAG, ORBIT_RING_DOTS_TAG, PROGRESS_BAR_TAG, PROGRESS_RING_TAG, SCAN_SWEEP_TAG, SCOPED_CSS, SKELETON_CARD_TAG, SKELETON_LIST_TAG, SKELETON_SHIMMER_TAG, SONAR_TAG, TYPING_DOTS_TAG, VINYL_TAG, WAVEFORM_TAG, WAVE_DOTS_TAG, define, defineActivityRings, defineAiNeural, defineAiOrb, defineAiThinking, defineAll, defineArcSpinner, defineBouncingDots, defineBreathingPulse, defineDotGridWave, defineEllipsis, defineEqualizer, defineEyes, defineHelixDots, defineIndeterminateProgressBar, defineIos27Orb, defineMaterialDoubleArc, defineMorphingSquare, defineMusicNote, defineOrbitDots, defineOrbitRingDots, defineProgressBar, defineProgressRing, defineScanSweep, defineSkeletonCard, defineSkeletonList, defineSkeletonShimmer, defineSonar, defineTypingDots, defineVinyl, defineWaveDots, defineWaveform };
|