loading-state-zoo 0.2.0 → 0.3.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 +276 -3
- package/dist/index.cjs +270 -34
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +36 -3
- package/dist/index.d.ts +36 -3
- package/dist/index.js +268 -32
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +267 -31
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +123 -1
- package/dist/react.d.ts +123 -1
- package/dist/react.js +267 -31
- package/dist/react.js.map +1 -1
- package/dist/theme.css +451 -0
- package/docs/AI.md +16 -8
- package/docs/components.json +297 -2
- package/package.json +2 -2
package/docs/components.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
|
3
|
-
"$comment": "loading-state-zoo v0.
|
|
3
|
+
"$comment": "loading-state-zoo v0.3.0 — machine-readable spec. Source of truth for all 32 components. Defaults match the rendered site.",
|
|
4
4
|
"package": {
|
|
5
5
|
"name": "loading-state-zoo",
|
|
6
|
-
"version": "0.
|
|
6
|
+
"version": "0.3.0",
|
|
7
7
|
"entrypoints": {
|
|
8
8
|
"webComponents": "loading-state-zoo",
|
|
9
9
|
"react": "loading-state-zoo/react",
|
|
@@ -646,6 +646,301 @@
|
|
|
646
646
|
"html": "<lz-skeleton-list width=\"220\" rows=\"5\"></lz-skeleton-list>",
|
|
647
647
|
"react": "<SkeletonList width={220} rows={5} />"
|
|
648
648
|
}
|
|
649
|
+
},
|
|
650
|
+
{
|
|
651
|
+
"id": "pulsing-orb",
|
|
652
|
+
"tag": "lz-pulsing-orb",
|
|
653
|
+
"reactComponent": "PulsingOrb",
|
|
654
|
+
"category": "Orbs",
|
|
655
|
+
"role": "status",
|
|
656
|
+
"description": "A glowing gradient orb that breathes in and out.",
|
|
657
|
+
"useCases": ["ambient loads", "hero panels", "app splash"],
|
|
658
|
+
"defaults": { "size": 44, "accent": "#0a84ff", "speed": 1 },
|
|
659
|
+
"attributes": [
|
|
660
|
+
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
|
|
661
|
+
{ "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
|
|
662
|
+
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
663
|
+
],
|
|
664
|
+
"cssVars": [
|
|
665
|
+
{ "name": "--lz-size", "default": "44px", "purpose": "Orb diameter" },
|
|
666
|
+
{ "name": "--lz-accent", "default": "#0a84ff", "purpose": "Orb glow color" }
|
|
667
|
+
],
|
|
668
|
+
"keyframeVars": [
|
|
669
|
+
{ "name": "--lz-orb-scale", "default": "1.16", "purpose": "Peak breathe scale" },
|
|
670
|
+
{ "name": "--lz-orb-fade", "default": "0.88", "purpose": "Peak breathe opacity" }
|
|
671
|
+
],
|
|
672
|
+
"examples": {
|
|
673
|
+
"html": "<lz-pulsing-orb size=\"64\" accent=\"#ff375f\"></lz-pulsing-orb>",
|
|
674
|
+
"react": "<PulsingOrb size={64} accent=\"#ff375f\" />"
|
|
675
|
+
}
|
|
676
|
+
},
|
|
677
|
+
{
|
|
678
|
+
"id": "morphing-orb",
|
|
679
|
+
"tag": "lz-morphing-orb",
|
|
680
|
+
"reactComponent": "MorphingOrb",
|
|
681
|
+
"category": "Orbs",
|
|
682
|
+
"role": "status",
|
|
683
|
+
"description": "A blob that continuously morphs its silhouette between rounded shapes.",
|
|
684
|
+
"useCases": ["creative waits", "brand moments", "game loading"],
|
|
685
|
+
"defaults": { "size": 44, "accent": "#0a84ff", "speed": 1 },
|
|
686
|
+
"attributes": [
|
|
687
|
+
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
|
|
688
|
+
{ "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
|
|
689
|
+
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
690
|
+
],
|
|
691
|
+
"cssVars": [
|
|
692
|
+
{ "name": "--lz-size", "default": "44px", "purpose": "Blob box size" },
|
|
693
|
+
{ "name": "--lz-accent", "default": "#0a84ff", "purpose": "Blob color" }
|
|
694
|
+
],
|
|
695
|
+
"keyframeVars": [],
|
|
696
|
+
"examples": {
|
|
697
|
+
"html": "<lz-morphing-orb size=\"64\" accent=\"#30d158\"></lz-morphing-orb>",
|
|
698
|
+
"react": "<MorphingOrb size={64} accent=\"#30d158\" />"
|
|
699
|
+
}
|
|
700
|
+
},
|
|
701
|
+
{
|
|
702
|
+
"id": "siri-orb",
|
|
703
|
+
"tag": "lz-siri-orb",
|
|
704
|
+
"reactComponent": "SiriOrb",
|
|
705
|
+
"category": "Orbs",
|
|
706
|
+
"role": "status",
|
|
707
|
+
"description": "A Siri-style orb with a multicolored conic sheen swirling inside.",
|
|
708
|
+
"useCases": ["voice assistants", "AI thinking", "smart waits"],
|
|
709
|
+
"defaults": { "size": 44, "accent": "#0a84ff", "speed": 1 },
|
|
710
|
+
"attributes": [
|
|
711
|
+
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
|
|
712
|
+
{ "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
|
|
713
|
+
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
714
|
+
],
|
|
715
|
+
"cssVars": [
|
|
716
|
+
{ "name": "--lz-size", "default": "44px", "purpose": "Orb diameter" },
|
|
717
|
+
{ "name": "--lz-accent", "default": "#0a84ff", "purpose": "Sheen hue" }
|
|
718
|
+
],
|
|
719
|
+
"keyframeVars": [],
|
|
720
|
+
"examples": {
|
|
721
|
+
"html": "<lz-siri-orb size=\"72\" accent=\"#64d2ff\"></lz-siri-orb>",
|
|
722
|
+
"react": "<SiriOrb size={72} accent=\"#64d2ff\" />"
|
|
723
|
+
}
|
|
724
|
+
},
|
|
725
|
+
{
|
|
726
|
+
"id": "dot-orb",
|
|
727
|
+
"tag": "lz-dot-orb",
|
|
728
|
+
"reactComponent": "DotOrb",
|
|
729
|
+
"category": "Orbs",
|
|
730
|
+
"role": "status",
|
|
731
|
+
"description": "A ring of shimmering dots arranged into an orb silhouette.",
|
|
732
|
+
"useCases": ["orbit waits", "spatial loading", "gaming screens"],
|
|
733
|
+
"defaults": { "size": 44, "count": 8, "color": "#f5f5f7", "speed": 1 },
|
|
734
|
+
"attributes": [
|
|
735
|
+
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
|
|
736
|
+
{ "name": "count", "reactProp": "count", "type": "number", "unit": "dots", "default": 8 },
|
|
737
|
+
{ "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
|
|
738
|
+
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
739
|
+
],
|
|
740
|
+
"cssVars": [
|
|
741
|
+
{ "name": "--lz-size", "default": "44px", "purpose": "Orb diameter" },
|
|
742
|
+
{ "name": "--lz-color", "default": "#f5f5f7", "purpose": "Dot color" }
|
|
743
|
+
],
|
|
744
|
+
"keyframeVars": [
|
|
745
|
+
{ "name": "--lz-dot-min", "default": "0.7", "purpose": "Resting dot scale" },
|
|
746
|
+
{ "name": "--lz-orb-fade", "default": "0.14", "purpose": "Resting dot opacity" }
|
|
747
|
+
],
|
|
748
|
+
"examples": {
|
|
749
|
+
"html": "<lz-dot-orb count=\"12\" color=\"#ff9f0a\"></lz-dot-orb>",
|
|
750
|
+
"react": "<DotOrb count={12} color=\"#ff9f0a\" />"
|
|
751
|
+
}
|
|
752
|
+
},
|
|
753
|
+
{
|
|
754
|
+
"id": "planet-orb",
|
|
755
|
+
"tag": "lz-planet-orb",
|
|
756
|
+
"reactComponent": "PlanetOrb",
|
|
757
|
+
"category": "Orbs",
|
|
758
|
+
"role": "status",
|
|
759
|
+
"description": "A glowing planet core with small moons orbiting it.",
|
|
760
|
+
"useCases": ["space motifs", "science apps", "sci-fi waits"],
|
|
761
|
+
"defaults": { "size": 44, "accent": "#0a84ff", "color": "#f5f5f7", "count": 2, "speed": 1 },
|
|
762
|
+
"attributes": [
|
|
763
|
+
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
|
|
764
|
+
{ "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
|
|
765
|
+
{ "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
|
|
766
|
+
{ "name": "count", "reactProp": "count", "type": "number", "unit": "moons", "default": 2 },
|
|
767
|
+
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
768
|
+
],
|
|
769
|
+
"cssVars": [
|
|
770
|
+
{ "name": "--lz-size", "default": "44px", "purpose": "Orb box size" },
|
|
771
|
+
{ "name": "--lz-accent", "default": "#0a84ff", "purpose": "Planet color" },
|
|
772
|
+
{ "name": "--lz-color", "default": "#f5f5f7", "purpose": "Moon color" }
|
|
773
|
+
],
|
|
774
|
+
"keyframeVars": [],
|
|
775
|
+
"examples": {
|
|
776
|
+
"html": "<lz-planet-orb count=\"3\" accent=\"#bf5af2\" color=\"#64d2ff\"></lz-planet-orb>",
|
|
777
|
+
"react": "<PlanetOrb count={3} accent=\"#bf5af2\" color=\"#64d2ff\" />"
|
|
778
|
+
}
|
|
779
|
+
},
|
|
780
|
+
{
|
|
781
|
+
"id": "aura-orb",
|
|
782
|
+
"tag": "lz-aura-orb",
|
|
783
|
+
"reactComponent": "AuraOrb",
|
|
784
|
+
"category": "Orbs",
|
|
785
|
+
"role": "status",
|
|
786
|
+
"description": "Two tinted orbs counter-rotating in overlapping orbits.",
|
|
787
|
+
"useCases": ["gradient waits", "brand palettes", "hero backgrounds"],
|
|
788
|
+
"defaults": { "size": 44, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
|
|
789
|
+
"attributes": [
|
|
790
|
+
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
|
|
791
|
+
{ "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
|
|
792
|
+
{ "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
|
|
793
|
+
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
794
|
+
],
|
|
795
|
+
"cssVars": [
|
|
796
|
+
{ "name": "--lz-size", "default": "44px", "purpose": "Orb box size" },
|
|
797
|
+
{ "name": "--lz-accent", "default": "#0a84ff", "purpose": "Counter orb color" },
|
|
798
|
+
{ "name": "--lz-color", "default": "#f5f5f7", "purpose": "Primary orb color" }
|
|
799
|
+
],
|
|
800
|
+
"keyframeVars": [],
|
|
801
|
+
"examples": {
|
|
802
|
+
"html": "<lz-aura-orb accent=\"#ff375f\" color=\"#64d2ff\"></lz-aura-orb>",
|
|
803
|
+
"react": "<AuraOrb accent=\"#ff375f\" color=\"#64d2ff\" />"
|
|
804
|
+
}
|
|
805
|
+
},
|
|
806
|
+
{
|
|
807
|
+
"id": "waveform",
|
|
808
|
+
"tag": "lz-waveform",
|
|
809
|
+
"reactComponent": "Waveform",
|
|
810
|
+
"category": "Music",
|
|
811
|
+
"role": "status",
|
|
812
|
+
"description": "A mirrored audio waveform pulsing around a center line.",
|
|
813
|
+
"useCases": ["audio apps", "playing states", "podcast waits"],
|
|
814
|
+
"defaults": { "size": 32, "count": 11, "color": "#f5f5f7", "accent": "#0a84ff", "speed": 1 },
|
|
815
|
+
"attributes": [
|
|
816
|
+
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 32 },
|
|
817
|
+
{ "name": "count", "reactProp": "count", "type": "number", "unit": "bars", "default": 11 },
|
|
818
|
+
{ "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
|
|
819
|
+
{ "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
|
|
820
|
+
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
821
|
+
],
|
|
822
|
+
"cssVars": [
|
|
823
|
+
{ "name": "--lz-size", "default": "32px", "purpose": "Wave height" },
|
|
824
|
+
{ "name": "--lz-bar-width", "default": "4px", "purpose": "Bar thickness" },
|
|
825
|
+
{ "name": "--lz-gap", "default": "4px", "purpose": "Bar spacing" }
|
|
826
|
+
],
|
|
827
|
+
"keyframeVars": [
|
|
828
|
+
{ "name": "--lz-wf-min", "default": "0.22", "purpose": "Resting bar scale" }
|
|
829
|
+
],
|
|
830
|
+
"examples": {
|
|
831
|
+
"html": "<lz-waveform count=\"15\" accent=\"#bf5af2\"></lz-waveform>",
|
|
832
|
+
"react": "<Waveform count={15} accent=\"#bf5af2\" />"
|
|
833
|
+
}
|
|
834
|
+
},
|
|
835
|
+
{
|
|
836
|
+
"id": "vinyl",
|
|
837
|
+
"tag": "lz-vinyl",
|
|
838
|
+
"reactComponent": "Vinyl",
|
|
839
|
+
"category": "Music",
|
|
840
|
+
"role": "status",
|
|
841
|
+
"description": "A spinning record with a gently bobbing tonearm.",
|
|
842
|
+
"useCases": ["music apps", "retro waits", "album screens"],
|
|
843
|
+
"defaults": { "size": 48, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
|
|
844
|
+
"attributes": [
|
|
845
|
+
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 48 },
|
|
846
|
+
{ "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
|
|
847
|
+
{ "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
|
|
848
|
+
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
849
|
+
],
|
|
850
|
+
"cssVars": [
|
|
851
|
+
{ "name": "--lz-size", "default": "48px", "purpose": "Record diameter" },
|
|
852
|
+
{ "name": "--lz-accent", "default": "#0a84ff", "purpose": "Label / stylus color" },
|
|
853
|
+
{ "name": "--lz-color", "default": "#f5f5f7", "purpose": "Tonearm color" }
|
|
854
|
+
],
|
|
855
|
+
"keyframeVars": [],
|
|
856
|
+
"examples": {
|
|
857
|
+
"html": "<lz-vinyl accent=\"#fa114f\" color=\"#f5f5f7\"></lz-vinyl>",
|
|
858
|
+
"react": "<Vinyl accent=\"#fa114f\" />"
|
|
859
|
+
}
|
|
860
|
+
},
|
|
861
|
+
{
|
|
862
|
+
"id": "sonar",
|
|
863
|
+
"tag": "lz-sonar",
|
|
864
|
+
"reactComponent": "Sonar",
|
|
865
|
+
"category": "Music",
|
|
866
|
+
"role": "status",
|
|
867
|
+
"description": "A pulsing core emitting expanding sonar rings.",
|
|
868
|
+
"useCases": ["audio pulses", "location pings", "motion waits"],
|
|
869
|
+
"defaults": { "size": 44, "count": 3, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
|
|
870
|
+
"attributes": [
|
|
871
|
+
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
|
|
872
|
+
{ "name": "count", "reactProp": "count", "type": "number", "unit": "rings", "default": 3 },
|
|
873
|
+
{ "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
|
|
874
|
+
{ "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
|
|
875
|
+
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
876
|
+
],
|
|
877
|
+
"cssVars": [
|
|
878
|
+
{ "name": "--lz-size", "default": "44px", "purpose": "Radar size" },
|
|
879
|
+
{ "name": "--lz-accent", "default": "#0a84ff", "purpose": "Ring color" },
|
|
880
|
+
{ "name": "--lz-color", "default": "#f5f5f7", "purpose": "Core color" }
|
|
881
|
+
],
|
|
882
|
+
"keyframeVars": [
|
|
883
|
+
{ "name": "--lz-sonar-fade", "default": "0.9", "purpose": "Ring start opacity" }
|
|
884
|
+
],
|
|
885
|
+
"examples": {
|
|
886
|
+
"html": "<lz-sonar count=\"4\" accent=\"#30d158\"></lz-sonar>",
|
|
887
|
+
"react": "<Sonar count={4} accent=\"#30d158\" />"
|
|
888
|
+
}
|
|
889
|
+
},
|
|
890
|
+
{
|
|
891
|
+
"id": "music-note",
|
|
892
|
+
"tag": "lz-music-note",
|
|
893
|
+
"reactComponent": "MusicNote",
|
|
894
|
+
"category": "Music",
|
|
895
|
+
"role": "status",
|
|
896
|
+
"description": "Musical note glyphs bobbing in a sing-song rhythm.",
|
|
897
|
+
"useCases": ["music players", "karaoke", "playful waits"],
|
|
898
|
+
"defaults": { "size": 32, "count": 2, "color": "#f5f5f7", "speed": 1 },
|
|
899
|
+
"attributes": [
|
|
900
|
+
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 32 },
|
|
901
|
+
{ "name": "count", "reactProp": "count", "type": "number", "unit": "notes", "default": 2 },
|
|
902
|
+
{ "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
|
|
903
|
+
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
904
|
+
],
|
|
905
|
+
"cssVars": [
|
|
906
|
+
{ "name": "--lz-size", "default": "32px", "purpose": "Note size" },
|
|
907
|
+
{ "name": "--lz-color", "default": "#f5f5f7", "purpose": "Note color" }
|
|
908
|
+
],
|
|
909
|
+
"keyframeVars": [
|
|
910
|
+
{ "name": "--lz-note-bob", "default": "0.35em", "purpose": "Note bob height" }
|
|
911
|
+
],
|
|
912
|
+
"examples": {
|
|
913
|
+
"html": "<lz-music-note count=\"3\" color=\"#bf5af2\"></lz-music-note>",
|
|
914
|
+
"react": "<MusicNote count={3} color=\"#bf5af2\" />"
|
|
915
|
+
}
|
|
916
|
+
},
|
|
917
|
+
{
|
|
918
|
+
"id": "activity-rings",
|
|
919
|
+
"tag": "lz-activity-rings",
|
|
920
|
+
"reactComponent": "ActivityRings",
|
|
921
|
+
"category": "Bars & rings",
|
|
922
|
+
"role": "img",
|
|
923
|
+
"description": "Three Apple Watch-style activity rings spinning at different speeds and directions.",
|
|
924
|
+
"useCases": ["fitness apps", "health dashboards", "workout sync"],
|
|
925
|
+
"defaults": { "size": 44, "accent": "#fa114f", "color": "#30d158", "colorWeak": "#32d7ff", "speed": 1 },
|
|
926
|
+
"attributes": [
|
|
927
|
+
{ "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
|
|
928
|
+
{ "name": "accent", "reactProp": "accent", "type": "string", "default": "#fa114f" },
|
|
929
|
+
{ "name": "color", "reactProp": "color", "type": "string", "default": "#30d158" },
|
|
930
|
+
{ "name": "color-weak", "reactProp": "colorWeak", "type": "string", "default": "#32d7ff" },
|
|
931
|
+
{ "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
|
|
932
|
+
],
|
|
933
|
+
"cssVars": [
|
|
934
|
+
{ "name": "--lz-size", "default": "44px", "purpose": "Ring box size" },
|
|
935
|
+
{ "name": "--lz-accent", "default": "#fa114f", "purpose": "Outer ring color" },
|
|
936
|
+
{ "name": "--lz-color", "default": "#30d158", "purpose": "Middle ring color" },
|
|
937
|
+
{ "name": "--lz-color-weak", "default": "#32d7ff", "purpose": "Inner ring color" }
|
|
938
|
+
],
|
|
939
|
+
"keyframeVars": [],
|
|
940
|
+
"examples": {
|
|
941
|
+
"html": "<lz-activity-rings size=\"64\"></lz-activity-rings>",
|
|
942
|
+
"react": "<ActivityRings size={64} />"
|
|
943
|
+
}
|
|
649
944
|
}
|
|
650
945
|
]
|
|
651
946
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "loading-state-zoo",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.3.0",
|
|
4
|
+
"description": "32 smooth, transform-only loading patterns as framework-agnostic web components with a thin React wrapper. Works in React, plain web, iOS and Android WebViews.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
7
7
|
"module": "./dist/index.js",
|