loading-state-zoo 0.1.0

package/docs/components.json

@@ -0,0 +1,533 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$comment": "loading-state-zoo v0.1.0 — machine-readable spec. Source of truth for all 17 components. Defaults match the rendered site.",
+  "package": {
+    "name": "loading-state-zoo",
+    "entrypoints": {
+      "webComponents": "loading-state-zoo",
+      "react": "loading-state-zoo/react",
+      "css": "loading-state-zoo/theme.css"
+    },
+    "autoRegistersOnImport": true,
+    "ssrSafe": true,
+    "collectsData": false,
+    "license": "MIT"
+  },
+  "commonAttributes": [
+    {
+      "name": "size",
+      "reactProp": "size",
+      "type": "number",
+      "unit": "px",
+      "meaning": "Primary dimension. For dots = dot diameter; for spinners/shapes = bounding box; for equalizer = bar height.",
+      "default": "pattern-specific"
+    },
+    {
+      "name": "color",
+      "reactProp": "color",
+      "type": "string",
+      "unit": "css color",
+      "meaning": "Main foreground color",
+      "default": "#f5f5f7"
+    },
+    {
+      "name": "accent",
+      "reactProp": "accent",
+      "type": "string",
+      "unit": "css color",
+      "meaning": "Accent/brand color",
+      "default": "#0a84ff"
+    },
+    {
+      "name": "speed",
+      "reactProp": "speed",
+      "type": "number",
+      "unit": "multiplier",
+      "meaning": "Animation speed multiplier applied to durations via calc()",
+      "default": "1"
+    },
+    {
+      "name": "width",
+      "reactProp": "width",
+      "type": "number",
+      "unit": "px",
+      "meaning": "Element width (bars and skeletons)",
+      "default": "pattern-specific"
+    },
+    {
+      "name": "height",
+      "reactProp": "height",
+      "type": "number",
+      "unit": "px",
+      "meaning": "Element height (bars and skeletons)",
+      "default": "pattern-specific"
+    }
+  ],
+  "sharedCssVariables": [
+    { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Foreground color on all patterns" },
+    { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Accent color on accent-using patterns" },
+    { "name": "--lz-speed", "default": "1", "purpose": "Duration multiplier" },
+    { "name": "--lz-surface", "default": "#1c1c1e", "purpose": "Track / skeleton background" },
+    { "name": "--lz-stroke", "default": "4px", "purpose": "Ring stroke width" },
+    { "name": "--lz-track", "default": "rgba(255,255,255,0.15)", "purpose": "Ring track / scan border color" }
+  ],
+  "components": [
+    {
+      "id": "bouncing-dots",
+      "tag": "lz-bouncing-dots",
+      "reactComponent": "BouncingDots",
+      "category": "Dots",
+      "role": "status",
+      "description": "Three round dots that hop up and down with a stagger.",
+      "useCases": ["loading a feed", "small section refresh"],
+      "defaults": { "size": 8, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 8 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "8px", "purpose": "Dot diameter" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Dot color" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-bounce", "default": "-10px", "purpose": "Dot hop height" }
+      ],
+      "examples": {
+        "html": "<lz-bouncing-dots size=\"12\" color=\"#0a84ff\"></lz-bouncing-dots>",
+        "react": "<BouncingDots size={12} color=\"#0a84ff\" />"
+      }
+    },
+    {
+      "id": "typing-dots",
+      "tag": "lz-typing-dots",
+      "reactComponent": "TypingDots",
+      "category": "Dots",
+      "role": "status",
+      "description": "Three dots pulsing in a typing rhythm.",
+      "useCases": ["chat", "messaging", "typing indicator"],
+      "defaults": { "size": 8, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 8 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [{ "name": "--lz-size", "default": "8px", "purpose": "Dot diameter" }],
+      "keyframeVars": [
+        { "name": "--lz-typing-min", "default": "0.35", "purpose": "Resting dot scale" },
+        { "name": "--lz-typing-peak", "default": "1.15", "purpose": "Peak dot scale" }
+      ],
+      "examples": {
+        "html": "<lz-typing-dots></lz-typing-dots>",
+        "react": "<TypingDots />"
+      }
+    },
+    {
+      "id": "wave-dots",
+      "tag": "lz-wave-dots",
+      "reactComponent": "WaveDots",
+      "category": "Dots",
+      "role": "status",
+      "description": "Four dots swelling across like a wave.",
+      "useCases": ["refresh", "sync in progress"],
+      "defaults": { "size": 8, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 8 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [{ "name": "--lz-size", "default": "8px", "purpose": "Dot diameter" }],
+      "keyframeVars": [
+        { "name": "--lz-wave-min", "default": "0.35", "purpose": "Resting dot scale" },
+        { "name": "--lz-wave-peak", "default": "1.1", "purpose": "Peak dot scale" }
+      ],
+      "examples": {
+        "html": "<lz-wave-dots></lz-wave-dots>",
+        "react": "<WaveDots />"
+      }
+    },
+    {
+      "id": "helix-dots",
+      "tag": "lz-helix-dots",
+      "reactComponent": "HelixDots",
+      "category": "Dots",
+      "role": "status",
+      "description": "A row of dots bobbing like a travelling wave (helix).",
+      "useCases": ["data processing", "playful waits"],
+      "defaults": { "size": 6, "count": 10, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 6 },
+        { "name": "count", "reactProp": "count", "type": "number", "unit": "dots", "default": 10 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [{ "name": "--lz-size", "default": "6px", "purpose": "Dot diameter" }],
+      "keyframeVars": [
+        { "name": "--lz-helix", "default": "-12px", "purpose": "Dot bob distance" }
+      ],
+      "examples": {
+        "html": "<lz-helix-dots count=\"14\"></lz-helix-dots>",
+        "react": "<HelixDots count={14} />"
+      }
+    },
+    {
+      "id": "dot-grid-wave",
+      "tag": "lz-dot-grid-wave",
+      "reactComponent": "DotGridWave",
+      "category": "Dots",
+      "role": "status",
+      "description": "A grid of dots rippling outward from the top-left corner.",
+      "useCases": ["dashboards", "brick layouts", "empty panels"],
+      "defaults": { "size": 6, "rows": 4, "cols": 5, "gap": 12, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 6 },
+        { "name": "rows", "reactProp": "rows", "type": "number", "unit": "rows", "default": 4 },
+        { "name": "cols", "reactProp": "cols", "type": "number", "unit": "cols", "default": 5 },
+        { "name": "gap", "reactProp": "gap", "type": "number", "unit": "px", "default": 12 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "6px", "purpose": "Dot diameter" },
+        { "name": "--lz-cols", "default": "5", "purpose": "Grid column count" },
+        { "name": "--lz-grid-gap", "default": "12px", "purpose": "Grid gap" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-grid-min", "default": "0.3", "purpose": "Resting dot scale" },
+        { "name": "--lz-grid-fade", "default": "0.15", "purpose": "Resting dot opacity" }
+      ],
+      "examples": {
+        "html": "<lz-dot-grid-wave rows=\"4\" cols=\"6\" size=\"8\" gap=\"14\"></lz-dot-grid-wave>",
+        "react": "<DotGridWave rows={4} cols={6} size={8} gap={14} />"
+      }
+    },
+    {
+      "id": "arc-spinner",
+      "tag": "lz-arc-spinner",
+      "reactComponent": "ArcSpinner",
+      "category": "Spinners",
+      "role": "status",
+      "description": "One spinning arc ring (classic circular loader).",
+      "useCases": ["any circular wait"],
+      "defaults": { "size": 44, "strokeWidth": 4, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "stroke-width", "reactProp": "strokeWidth", "type": "number", "unit": "px", "default": 4 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Ring box size" },
+        { "name": "--lz-stroke", "default": "4px", "purpose": "Ring thickness" }
+      ],
+      "keyframeVars": [],
+      "examples": {
+        "html": "<lz-arc-spinner size=\"64\" stroke-width=\"6\" color=\"#0a84ff\"></lz-arc-spinner>",
+        "react": "<ArcSpinner size={64} strokeWidth={6} color=\"#0a84ff\" />"
+      }
+    },
+    {
+      "id": "material-double-arc",
+      "tag": "lz-material-double-arc",
+      "reactComponent": "MaterialDoubleArc",
+      "category": "Spinners",
+      "role": "status",
+      "description": "Two arcs spinning in opposite directions (Material look).",
+      "useCases": ["android-style apps", "processing"],
+      "defaults": { "size": 44, "strokeWidth": 4, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "stroke-width", "reactProp": "strokeWidth", "type": "number", "unit": "px", "default": 4 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "color-weak", "reactProp": "colorWeak", "type": "string", "default": "95% tint of color" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Ring box size" },
+        { "name": "--lz-stroke", "default": "4px", "purpose": "Ring thickness" },
+        { "name": "--lz-color-weak", "default": "color-mix(color 95%, transparent)", "purpose": "Arc tint" }
+      ],
+      "keyframeVars": [],
+      "examples": {
+        "html": "<lz-material-double-arc size=\"56\" stroke-width=\"5\"></lz-material-double-arc>",
+        "react": "<MaterialDoubleArc size={56} strokeWidth={5} />"
+      }
+    },
+    {
+      "id": "scan-sweep",
+      "tag": "lz-scan-sweep",
+      "reactComponent": "ScanSweep",
+      "category": "Spinners",
+      "role": "status",
+      "description": "Concentric rings with a sweeping radar beam.",
+      "useCases": ["scanning", "searching", "syncing"],
+      "defaults": { "size": 44, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "color-weak", "reactProp": "colorWeak", "type": "string", "default": "80% tint of color" },
+        { "name": "color-sweep", "reactProp": "colorSweep", "type": "string", "default": "8% tint of color" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Ring box size" },
+        { "name": "--lz-track", "default": "rgba(255,255,255,0.12)", "purpose": "Outer ring border" },
+        { "name": "--lz-track-weak", "default": "rgba(255,255,255,0.08)", "purpose": "Inner ring border" },
+        { "name": "--lz-color-weak", "default": "80% tint", "purpose": "Center dot color" },
+        { "name": "--lz-color-sweep", "default": "8% tint", "purpose": "Beam tail color" }
+      ],
+      "keyframeVars": [],
+      "examples": {
+        "html": "<lz-scan-sweep size=\"64\" color=\"#30d158\"></lz-scan-sweep>",
+        "react": "<ScanSweep size={64} color=\"#30d158\" />"
+      }
+    },
+    {
+      "id": "orbit-dots",
+      "tag": "lz-orbit-dots",
+      "reactComponent": "OrbitDots",
+      "category": "Spinners",
+      "role": "status",
+      "description": "Three dots gliding around an invisible circle.",
+      "useCases": ["light floaty waits"],
+      "defaults": { "size": 44, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Orbit box size" },
+        { "name": "--lz-color-weak", "default": "90% tint", "purpose": "Dot color" }
+      ],
+      "keyframeVars": [],
+      "examples": {
+        "html": "<lz-orbit-dots size=\"56\" color=\"#0a84ff\"></lz-orbit-dots>",
+        "react": "<OrbitDots size={56} color=\"#0a84ff\" />"
+      }
+    },
+    {
+      "id": "orbit-ring-dots",
+      "tag": "lz-orbit-ring-dots",
+      "reactComponent": "OrbitRingDots",
+      "category": "Spinners",
+      "role": "status",
+      "description": "Eight dots around a ring chasing each other with fading opacity.",
+      "useCases": ["elegant circular waits", "brand moments"],
+      "defaults": { "size": 44, "dotSize": 7.92, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "dot-size", "reactProp": "dotSize", "type": "number", "unit": "px", "default": "0.18 x size" },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Ring box size" },
+        { "name": "--lz-dot-size", "default": "0.18em", "purpose": "Dot size (relative or px)" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-orbit-fade", "default": "0.12", "purpose": "Resting dot opacity" }
+      ],
+      "examples": {
+        "html": "<lz-orbit-ring-dots size=\"56\" dot-size=\"10\"></lz-orbit-ring-dots>",
+        "react": "<OrbitRingDots size={56} dotSize={10} />"
+      }
+    },
+    {
+      "id": "eyes",
+      "tag": "lz-eyes",
+      "reactComponent": "Eyes",
+      "category": "Shapes",
+      "role": "status",
+      "description": "Two cartoon eyes that look side to side and blink.",
+      "useCases": ["fun apps", "kids' stuff", "watching moments"],
+      "defaults": { "size": 44, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Eye group size" },
+        { "name": "--lz-pupil", "default": "rgba(0,0,0,0.85)", "purpose": "Pupil color" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-gaze-from", "default": "-3px", "purpose": "Pupil start offset" },
+        { "name": "--lz-gaze-to", "default": "3px", "purpose": "Pupil end offset" },
+        { "name": "--lz-blink", "default": "0.08", "purpose": "Blink closure scale" }
+      ],
+      "examples": {
+        "html": "<lz-eyes size=\"56\"></lz-eyes>",
+        "react": "<Eyes size={56} />"
+      }
+    },
+    {
+      "id": "morphing-square",
+      "tag": "lz-morphing-square",
+      "reactComponent": "MorphingSquare",
+      "category": "Shapes",
+      "role": "status",
+      "description": "A glowing square that swells, rounds and spins.",
+      "useCases": ["modern splash states", "brand colors"],
+      "defaults": { "size": 44, "accent": "#0a84ff", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Box size" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Box color" },
+        { "name": "--lz-glow", "default": "35% tint shadow", "purpose": "Glow shadow" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-morph", "default": "0.72", "purpose": "Smallest scale" },
+        { "name": "--lz-morph-radius", "default": "17%", "purpose": "Corner roundness at peak" }
+      ],
+      "examples": {
+        "html": "<lz-morphing-square accent=\"#bf5af2\" size=\"56\"></lz-morphing-square>",
+        "react": "<MorphingSquare accent=\"#bf5af2\" size={56} />"
+      }
+    },
+    {
+      "id": "breathing-pulse",
+      "tag": "lz-breathing-pulse",
+      "reactComponent": "BreathingPulse",
+      "category": "Shapes",
+      "role": "status",
+      "description": "A soft circle that gently grows and shrinks.",
+      "useCases": ["subtle alive waits", "background states"],
+      "defaults": { "size": 36, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 36 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [{ "name": "--lz-size", "default": "36px", "purpose": "Circle size" }],
+      "keyframeVars": [
+        { "name": "--lz-breath", "default": "1.14", "purpose": "Growth scale" }
+      ],
+      "examples": {
+        "html": "<lz-breathing-pulse size=\"48\" color=\"#30d158\"></lz-breathing-pulse>",
+        "react": "<BreathingPulse size={48} color=\"#30d158\" />"
+      }
+    },
+    {
+      "id": "equalizer",
+      "tag": "lz-equalizer",
+      "reactComponent": "Equalizer",
+      "category": "Bars & rings",
+      "role": "status",
+      "description": "Four bars dancing like a music equalizer.",
+      "useCases": ["audio", "music", "waveform"],
+      "defaults": { "size": 22, "barWidth": 3, "gap": 3, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 22, "meaning": "Bar height" },
+        { "name": "bar-width", "reactProp": "barWidth", "type": "number", "unit": "px", "default": 3 },
+        { "name": "gap", "reactProp": "gap", "type": "number", "unit": "px", "default": 3 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "22px", "purpose": "Bar height" },
+        { "name": "--lz-bar-width", "default": "3px", "purpose": "Bar width" },
+        { "name": "--lz-gap", "default": "3px", "purpose": "Gap between bars" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-eq-min", "default": "0.3", "purpose": "Shortest bar scale" }
+      ],
+      "examples": {
+        "html": "<lz-equalizer size=\"24\" bar-width=\"4\" gap=\"4\" color=\"#ff375f\"></lz-equalizer>",
+        "react": "<Equalizer size={24} barWidth={4} gap={4} color=\"#ff375f\" />"
+      }
+    },
+    {
+      "id": "progress-ring",
+      "tag": "lz-progress-ring",
+      "reactComponent": "ProgressRing",
+      "category": "Bars & rings",
+      "role": "progressbar",
+      "description": "A ring that fills to a driven percentage. Static — set percent.",
+      "useCases": ["uploads", "downloads", "known percent tasks"],
+      "defaults": { "size": 44, "strokeWidth": 4, "percent": 0, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "stroke-width", "reactProp": "strokeWidth", "type": "number", "unit": "px", "default": 4 },
+        { "name": "percent", "reactProp": "percent", "type": "number", "unit": "0-100", "default": 0 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7", "meaning": "Fill color" },
+        { "name": "track-color", "reactProp": "trackColor", "type": "string", "default": "rgba(255,255,255,0.15)" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Ring box size" },
+        { "name": "--lz-stroke", "default": "4px", "purpose": "Ring thickness" },
+        { "name": "--lz-track", "default": "rgba(255,255,255,0.15)", "purpose": "Track color" },
+        { "name": "--lz-percent", "default": "0", "purpose": "Fill percent number" }
+      ],
+      "keyframeVars": [],
+      "a11y": "role=progressbar, aria-valuenow/min/max updated with percent",
+      "examples": {
+        "html": "<lz-progress-ring percent=\"65\" size=\"56\" stroke-width=\"6\" color=\"#0a84ff\"></lz-progress-ring>",
+        "react": "<ProgressRing percent={65} size={56} strokeWidth={6} color=\"#0a84ff\" />"
+      }
+    },
+    {
+      "id": "indeterminate-progress-bar",
+      "tag": "lz-indeterminate-progress-bar",
+      "reactComponent": "IndeterminateProgressBar",
+      "category": "Bars & rings",
+      "role": "status",
+      "description": "A bar with a slider sliding back and forth (unknown progress).",
+      "useCases": ["long unknown tasks"],
+      "defaults": { "width": 160, "height": 6, "accent": "#0a84ff", "speed": 1 },
+      "attributes": [
+        { "name": "width", "reactProp": "width", "type": "number", "unit": "px", "default": 160 },
+        { "name": "height", "reactProp": "height", "type": "number", "unit": "px", "default": 6 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "track-color", "reactProp": "trackColor", "type": "string", "default": "#1c1c1e" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Slider color" },
+        { "name": "--lz-surface", "default": "#1c1c1e", "purpose": "Track color" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-slide-from", "default": "-100%", "purpose": "Slider start" },
+        { "name": "--lz-slide-to", "default": "300%", "purpose": "Slider end" }
+      ],
+      "examples": {
+        "html": "<lz-indeterminate-progress-bar width=\"220\" height=\"8\" accent=\"#0a84ff\"></lz-indeterminate-progress-bar>",
+        "react": "<IndeterminateProgressBar width={220} height={8} accent=\"#0a84ff\" />"
+      }
+    },
+    {
+      "id": "skeleton-shimmer",
+      "tag": "lz-skeleton-shimmer",
+      "reactComponent": "SkeletonShimmer",
+      "category": "Skeletons",
+      "role": "status",
+      "description": "A rounded block with a light sweeping across it.",
+      "useCases": ["image/profile/card placeholders"],
+      "defaults": { "width": 120, "height": 28, "speed": 1 },
+      "attributes": [
+        { "name": "width", "reactProp": "width", "type": "number", "unit": "px", "default": 120 },
+        { "name": "height", "reactProp": "height", "type": "number", "unit": "px", "default": 28 },
+        { "name": "track-color", "reactProp": "trackColor", "type": "string", "default": "#1c1c1e" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-surface", "default": "#1c1c1e", "purpose": "Block background" },
+        { "name": "--lz-sheen", "default": "rgba(255,255,255,0.1)", "purpose": "Sweep light color" },
+        { "name": "--lz-radius", "default": "10px", "purpose": "Corner radius" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-sheen-from", "default": "-120%", "purpose": "Sheen start" },
+        { "name": "--lz-sheen-to", "default": "220%", "purpose": "Sheen end" }
+      ],
+      "examples": {
+        "html": "<lz-skeleton-shimmer width=\"240\" height=\"24\"></lz-skeleton-shimmer>",
+        "react": "<SkeletonShimmer width={240} height={24} />"
+      }
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "loading-state-zoo",
+  "version": "0.1.0",
+  "description": "17 smooth, transform-only loading patterns as framework-agnostic web components with a thin React wrapper. Works in React, plain web, iOS and Android WebViews.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./webcomponents": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs"
+    },
+    "./theme.css": "./dist/theme.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "docs"
+  ],
+  "sideEffects": [
+    "./dist/index.js",
+    "./dist/index.cjs",
+    "./dist/react.js",
+    "./dist/react.cjs"
+  ],
+  "keywords": [
+    "loading",
+    "spinner",
+    "pattern",
+    "web-components",
+    "custom-elements",
+    "react",
+    "tailwind",
+    "loading-state"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.2",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  }
+}