loading-dev 0.3.4 → 0.3.5

package/README.md

@@ -1,6 +1,6 @@
 # loading-dev
 
-Loading, made beautiful. A small library of loading indicators for React.
+Beautiful loading indicators for React.
 
 ```sh
 npm install loading-dev
@@ -12,19 +12,17 @@ import { Arc } from "loading-dev";
 <Arc size={16} />
 ```
 
-You can set `size`, `color` and `duration`, plus `easing` on the rotating spinners, `cap` on the stroked ones and a prop of its own on a few others. The library exposes `playState` and also allows you to add custom styling. They work in Server Components and respect reduced motion out of the box. Requires React 19 or later.
+All indicators support `size`, `color` and `duration`. Some also expose additional controls like `easing`, `cap` or spinner-specific props.
 
-Available: `Arc`, `Atom`, `Blocks`, `BouncingDots`, `Cascade`, `CircularDots`, `Classic`, `ClassicV2`, `Clock`, `Comet`, `Compass`, `Dual`, `Eclipse`, `Flip`, `Gather`, `Leap`, `LinearDots`, `Loading`, `Morph`, `Orbit`, `Pulse`, `Radar`, `Ring`, `Ripple`, `Slide`, `Snake`, `Swirl`, `Trace`, `Wave`.
+The library exposes `playState` and you can customize any indicator with your own styles.
 
-You can find docs and live previews at [loading.dev](https://loading.dev).
+The spinners respect reduced motion out of the box and require React 19 or later.
 
-## Development
+Current list of indicators:
 
-The library itself is at the root and the website is in `apps/web`. `pnpm dev` runs both.
+`Arc`, `Atom`, `Blocks`, `BouncingDots`, `Cascade`, `CircularDots`, `Classic`, `ClassicV2`, `Clock`, `Comet`, `Compass`, `Dual`, `Eclipse`, `Flip`, `Gather`, `Leap`, `LinearDots`, `Loading`, `Morph`, `Orbit`, `Pulse`, `Radar`, `Ring`, `Ripple`, `Slide`, `Snake`, `Swirl`, `Trace`, `Wave`.
 
-## Credits
-
-Made with care by [Jakub](https://x.com/jakubkrehel) and [Paul](https://x.com/paulfaivret).
+Docs and live previews are available at [loading.dev](https://loading.dev).
 
 ## License
 

package/dist/arc.js

@@ -1,9 +1,9 @@
 import {
   Arc
-} from "./chunk-X7BJQCYL.js";
-import "./chunk-7C6Q6WUN.js";
+} from "./chunk-MAKBZTL3.js";
+import "./chunk-A2PZBHTA.js";
 import "./chunk-JNR4T6LZ.js";
-import "./chunk-VRX5ZYC6.js";
+import "./chunk-UAO52LUL.js";
 import "./chunk-OMNMMKI7.js";
 export {
   Arc

package/dist/atom.js

@@ -1,8 +1,8 @@
 import {
   Atom
-} from "./chunk-5DLURQGF.js";
-import "./chunk-7C6Q6WUN.js";
-import "./chunk-VRX5ZYC6.js";
+} from "./chunk-BAVSTTWG.js";
+import "./chunk-A2PZBHTA.js";
+import "./chunk-UAO52LUL.js";
 import "./chunk-OMNMMKI7.js";
 export {
   Atom

package/dist/blocks.js

@@ -1,8 +1,8 @@
 import {
   Blocks,
   DEFAULT_BLOCKS_SWEEP
-} from "./chunk-PBB2PRPT.js";
-import "./chunk-VRX5ZYC6.js";
+} from "./chunk-VZX7APSS.js";
+import "./chunk-UAO52LUL.js";
 import "./chunk-OMNMMKI7.js";
 export {
   Blocks,

package/dist/bouncing-dots.js

@@ -1,7 +1,7 @@
 import {
   BouncingDots
-} from "./chunk-UWSCBISJ.js";
-import "./chunk-VRX5ZYC6.js";
+} from "./chunk-ULWRXY3A.js";
+import "./chunk-UAO52LUL.js";
 import "./chunk-OMNMMKI7.js";
 export {
   BouncingDots

package/dist/cascade.js

@@ -1,8 +1,8 @@
 import {
   Cascade
-} from "./chunk-I5CFO2M5.js";
+} from "./chunk-KOYM24WV.js";
 import "./chunk-JNR4T6LZ.js";
-import "./chunk-VRX5ZYC6.js";
+import "./chunk-UAO52LUL.js";
 import "./chunk-OMNMMKI7.js";
 export {
   Cascade

package/dist/{chunk-AHW6IXXT.js → chunk-2LMGBBRJ.js}

@@ -2,7 +2,7 @@ import {
   SpinnerStyle,
   spinnerRoot,
   step
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE,
   STEP_VAR,
@@ -62,7 +62,6 @@ var css = `
 @media (prefers-reduced-motion: reduce) {
   .ld-eclipse-dot {
     translate: calc(var(${STEP_VAR}) * 150% - 75%) 0;
-    animation: none;
   }
 }
 `;

package/dist/{chunk-5LSP7MQQ.js → chunk-2OX27TAE.js}

@@ -1,11 +1,11 @@
 import {
   rotationCss,
   spinClass
-} from "./chunk-7C6Q6WUN.js";
+} from "./chunk-A2PZBHTA.js";
 import {
   SpinnerStyle,
   spinnerRoot
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE
 } from "./chunk-OMNMMKI7.js";

package/dist/{chunk-IQ2WQZFY.js → chunk-2TYML5J2.js}

@@ -1,11 +1,11 @@
 import {
   rotationCss,
   spinClass
-} from "./chunk-7C6Q6WUN.js";
+} from "./chunk-A2PZBHTA.js";
 import {
   SpinnerStyle,
   spinnerRoot
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE
 } from "./chunk-OMNMMKI7.js";

package/dist/{chunk-A43AJR54.js → chunk-3WMZVDPS.js}

@@ -1,12 +1,13 @@
+import {
+  fadeCss
+} from "./chunk-PVVWLDIS.js";
 import {
   SpinnerStyle,
   spinnerRoot,
   step
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
-  SIZE,
-  animation,
-  stagger
+  SIZE
 } from "./chunk-OMNMMKI7.js";
 
 // src/circular-dots.tsx
@@ -27,26 +28,7 @@ var css = `
   height: ${SIZE};
 }
 
-.ld-circular-dots-dot {
-  ${animation("circular-dots", "ld-circular-dots-fade", "linear")}
-  animation-delay: ${stagger("circular-dots", DOTS.length)};
-}
-
-@keyframes ld-circular-dots-fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.2;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-circular-dots-dot {
-    opacity: 0.6;
-    animation: none;
-  }
-}
+${fadeCss("circular-dots", "dot", DOTS.length, { dim: 0.2, rest: 0.6 })}
 `;
 function CircularDots(props) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/{chunk-LIPOYJAI.js → chunk-4O4ADYWE.js}

@@ -2,7 +2,7 @@ import {
   SpinnerStyle,
   spinnerRoot,
   step
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE,
   STEP_VAR,
@@ -58,7 +58,6 @@ var css = `
 @media (prefers-reduced-motion: reduce) {
   .ld-leap-wrapper {
     transform: translateX(calc(var(${STEP_VAR}) * var(--ld-leap-gap)));
-    animation: none;
   }
 }
 `;

package/dist/{chunk-NHN4FV63.js → chunk-5UAEBEER.js}

@@ -1,14 +1,14 @@
 import {
   rotationCss,
   spinClass
-} from "./chunk-7C6Q6WUN.js";
+} from "./chunk-A2PZBHTA.js";
 import {
   linecap
 } from "./chunk-JNR4T6LZ.js";
 import {
   SpinnerStyle,
   spinnerRoot
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE
 } from "./chunk-OMNMMKI7.js";

package/dist/{chunk-7C6Q6WUN.js → chunk-A2PZBHTA.js}

@@ -31,12 +31,6 @@ function rotationCss(name, turn = ROTATE) {
 @keyframes ld-${name}-rotate {
   ${turn}
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-${name}-spin {
-    animation: none;
-  }
-}
 `;
 }
 

package/dist/{chunk-5DLURQGF.js → chunk-BAVSTTWG.js}

@@ -1,13 +1,13 @@
 import {
   rotationCss,
   spinClass
-} from "./chunk-7C6Q6WUN.js";
+} from "./chunk-A2PZBHTA.js";
 import {
   SpinnerStyle,
   cssVars,
   spinnerRoot,
   step
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE,
   stagger

package/dist/{chunk-IRMB7CHZ.js → chunk-BCIAMPLU.js}

@@ -3,7 +3,7 @@ import {
   cssVars,
   spinnerRoot,
   step
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE,
   animation,
@@ -65,7 +65,6 @@ var css = `
 @media (prefers-reduced-motion: reduce) {
   .ld-slide-dot {
     transform: var(--ld-slide-rest);
-    animation: none;
   }
 }
 `;

package/dist/{chunk-VBI53UGV.js → chunk-DKYEZLIN.js}

@@ -2,7 +2,7 @@ import {
   SpinnerStyle,
   spinnerRoot,
   step
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE,
   STEP_VAR,
@@ -49,7 +49,6 @@ var css = `
 @media (prefers-reduced-motion: reduce) {
   .ld-wave-bar {
     height: calc((0.4 + var(${STEP_VAR}) * 0.15) * 100%);
-    animation: none;
   }
 }
 `;

package/dist/{chunk-IWVH2GKE.js → chunk-FQ2U2M7F.js}

@@ -2,7 +2,7 @@ import {
   SpinnerStyle,
   spinnerRoot,
   step
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE,
   STEP_VAR,
@@ -50,7 +50,6 @@ var css = `
   .ld-ripple-ring {
     opacity: 0.4;
     transform: scale(calc((var(${STEP_VAR}) + 1) / ${RINGS.length}));
-    animation: none;
   }
 }
 `;

package/dist/{chunk-K5XVX5GB.js → chunk-FWH6VWVK.js}

@@ -2,7 +2,7 @@ import {
   SpinnerStyle,
   spinnerRoot,
   step
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE,
   animation,
@@ -44,7 +44,6 @@ var css = `
 @media (prefers-reduced-motion: reduce) {
   .ld-linear-dots-dot {
     opacity: 0.75;
-    animation: none;
   }
 }
 `;

package/dist/{chunk-5DS5PSRD.js → chunk-HL7TIIDB.js}

@@ -1,90 +1,90 @@
 import {
   Swirl
-} from "./chunk-BMJ3AGRK.js";
+} from "./chunk-SUUR5WMA.js";
 import {
   Trace
-} from "./chunk-HDBQBCTN.js";
+} from "./chunk-KAZ5BTXC.js";
 import {
   Wave
-} from "./chunk-VBI53UGV.js";
+} from "./chunk-DKYEZLIN.js";
 import {
   Orbit
-} from "./chunk-Y7QGIWTL.js";
+} from "./chunk-LDXBT62V.js";
 import {
   Pulse
-} from "./chunk-FKUMWHUL.js";
+} from "./chunk-PM6DU637.js";
 import {
   Radar
-} from "./chunk-5LSP7MQQ.js";
+} from "./chunk-2OX27TAE.js";
 import {
   Ring
-} from "./chunk-ZLJYYX76.js";
+} from "./chunk-L2DUMHO4.js";
 import {
   Ripple
-} from "./chunk-IWVH2GKE.js";
+} from "./chunk-FQ2U2M7F.js";
 import {
   Slide
-} from "./chunk-IRMB7CHZ.js";
+} from "./chunk-BCIAMPLU.js";
 import {
   Snake
-} from "./chunk-RTKHVDCD.js";
+} from "./chunk-UOXB5QOZ.js";
+import {
+  Flip
+} from "./chunk-YIB63EKJ.js";
 import {
   Gather
-} from "./chunk-TFHDE6YZ.js";
+} from "./chunk-JKLL7YYG.js";
 import {
   Leap
-} from "./chunk-LIPOYJAI.js";
+} from "./chunk-4O4ADYWE.js";
 import {
   LinearDots
-} from "./chunk-K5XVX5GB.js";
+} from "./chunk-FWH6VWVK.js";
 import {
   Loading
-} from "./chunk-MVL7SVAH.js";
+} from "./chunk-RAHAQ7XK.js";
 import {
   Morph
-} from "./chunk-AY4VLQBZ.js";
+} from "./chunk-P4BSSDSY.js";
 import {
   Classic
-} from "./chunk-IZ4TRHOC.js";
+} from "./chunk-IJJULNRU.js";
 import {
   Clock
-} from "./chunk-IQ2WQZFY.js";
+} from "./chunk-2TYML5J2.js";
 import {
   Comet
-} from "./chunk-5A6DX4J6.js";
+} from "./chunk-UXTZTFNZ.js";
 import {
   Compass
-} from "./chunk-T7OV7MUW.js";
+} from "./chunk-JQNF5GYA.js";
 import {
   Dual
-} from "./chunk-NHN4FV63.js";
+} from "./chunk-5UAEBEER.js";
 import {
   Eclipse
-} from "./chunk-AHW6IXXT.js";
-import {
-  Flip
-} from "./chunk-5R75HMWP.js";
+} from "./chunk-2LMGBBRJ.js";
 import {
   Arc
-} from "./chunk-X7BJQCYL.js";
+} from "./chunk-MAKBZTL3.js";
 import {
   Atom
-} from "./chunk-5DLURQGF.js";
+} from "./chunk-BAVSTTWG.js";
 import {
   Blocks
-} from "./chunk-PBB2PRPT.js";
+} from "./chunk-VZX7APSS.js";
 import {
   BouncingDots
-} from "./chunk-UWSCBISJ.js";
+} from "./chunk-ULWRXY3A.js";
 import {
   Cascade
-} from "./chunk-I5CFO2M5.js";
+} from "./chunk-KOYM24WV.js";
 import {
   CircularDots
-} from "./chunk-A43AJR54.js";
+} from "./chunk-3WMZVDPS.js";
 import {
   ClassicV2
-} from "./chunk-T5EUYN7R.js";
+} from "./chunk-R5ZDKN3Z.js";
 
 // src/spinners.ts
 var SPINNERS = {

package/dist/{chunk-IZ4TRHOC.js → chunk-IJJULNRU.js}

@@ -1,13 +1,14 @@
+import {
+  fadeCss
+} from "./chunk-PVVWLDIS.js";
 import {
   SpinnerStyle,
   spinnerRoot,
   step
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE,
-  STEP_VAR,
-  animation,
-  stagger
+  STEP_VAR
 } from "./chunk-OMNMMKI7.js";
 
 // src/classic.tsx
@@ -36,25 +37,9 @@ var css = `
   background: currentColor;
   border-radius: 6px;
   transform: rotate(calc(var(${STEP_VAR}) * 30deg)) translate(146%);
-  ${animation("classic", "ld-classic-spin", "linear")}
-  animation-delay: ${stagger("classic", BARS.length)};
-}
-
-@keyframes ld-classic-spin {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.15;
-  }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .ld-classic-bar {
-    opacity: 0.5;
-    animation: none;
-  }
-}
+${fadeCss("classic", "bar", BARS.length, { dim: 0.15, rest: 0.5 })}
 `;
 function Classic(props) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/{chunk-TFHDE6YZ.js → chunk-JKLL7YYG.js}

@@ -2,7 +2,7 @@ import {
   SpinnerStyle,
   cssVars,
   spinnerRoot
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE,
   animation
@@ -65,13 +65,6 @@ var css = `
     transform: rotate(90deg);
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-gather-group,
-  .ld-gather-block {
-    animation: none;
-  }
-}
 `;
 function Gather(props) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/{chunk-T7OV7MUW.js → chunk-JQNF5GYA.js}

@@ -1,7 +1,7 @@
 import {
   SpinnerStyle,
   spinnerRoot
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE,
   animation
@@ -25,12 +25,6 @@ var css = `
     transform: rotate(90deg);
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-compass-ticks {
-    animation: none;
-  }
-}
 `;
 function Compass(props) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/{chunk-HDBQBCTN.js → chunk-KAZ5BTXC.js}

@@ -1,14 +1,14 @@
 import {
   rotationCss,
   spinClass
-} from "./chunk-7C6Q6WUN.js";
+} from "./chunk-A2PZBHTA.js";
 import {
   linecap
 } from "./chunk-JNR4T6LZ.js";
 import {
   SpinnerStyle,
   spinnerRoot
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE
 } from "./chunk-OMNMMKI7.js";

package/dist/{chunk-I5CFO2M5.js → chunk-KOYM24WV.js}

@@ -5,7 +5,7 @@ import {
   SpinnerStyle,
   spinnerRoot,
   step
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE,
   animation,
@@ -33,12 +33,6 @@ var css = `
     transform: rotate(360deg);
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-cascade-arc {
-    animation: none;
-  }
-}
 `;
 function Cascade({ cap, ...rest }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/{chunk-ZLJYYX76.js → chunk-L2DUMHO4.js}

@@ -1,14 +1,14 @@
 import {
   rotationCss,
   spinClass
-} from "./chunk-7C6Q6WUN.js";
+} from "./chunk-A2PZBHTA.js";
 import {
   linecap
 } from "./chunk-JNR4T6LZ.js";
 import {
   SpinnerStyle,
   spinnerRoot
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE
 } from "./chunk-OMNMMKI7.js";

package/dist/{chunk-Y7QGIWTL.js → chunk-LDXBT62V.js}

@@ -1,11 +1,11 @@
 import {
   rotationCss,
   spinClass
-} from "./chunk-7C6Q6WUN.js";
+} from "./chunk-A2PZBHTA.js";
 import {
   SpinnerStyle,
   spinnerRoot
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE
 } from "./chunk-OMNMMKI7.js";

package/dist/{chunk-X7BJQCYL.js → chunk-MAKBZTL3.js}

@@ -1,14 +1,14 @@
 import {
   rotationCss,
   spinClass
-} from "./chunk-7C6Q6WUN.js";
+} from "./chunk-A2PZBHTA.js";
 import {
   linecap
 } from "./chunk-JNR4T6LZ.js";
 import {
   SpinnerStyle,
   spinnerRoot
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE
 } from "./chunk-OMNMMKI7.js";

package/dist/{chunk-AY4VLQBZ.js → chunk-P4BSSDSY.js}

@@ -1,7 +1,7 @@
 import {
   SpinnerStyle,
   spinnerRoot
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE,
   animation
@@ -38,12 +38,6 @@ var css = `
     transform: rotate(90deg);
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-morph-shape {
-    animation: none;
-  }
-}
 `;
 function Morph(props) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/{chunk-FKUMWHUL.js → chunk-PM6DU637.js}

@@ -1,7 +1,7 @@
 import {
   SpinnerStyle,
   spinnerRoot
-} from "./chunk-VRX5ZYC6.js";
+} from "./chunk-UAO52LUL.js";
 import {
   SIZE,
   animation
@@ -34,7 +34,6 @@ var css = `
 @media (prefers-reduced-motion: reduce) {
   .ld-pulse-ring {
     opacity: 0.2;
-    animation: none;
   }
 }
 `;