loading-dev 0.3.3 → 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.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { CapProps } from './cap.js';
+import { EasingProps } from './easing.js';
+import { SpinnerProps } from './types.js';
+import './motion.js';
+
+interface ArcProps extends SpinnerProps, EasingProps, CapProps {
+}
+declare function Arc({ cap, easing, ...rest }: ArcProps): react.JSX.Element;
+
+export { Arc, type ArcProps };

package/dist/arc.js

@@ -0,0 +1,10 @@
+import {
+  Arc
+} from "./chunk-MAKBZTL3.js";
+import "./chunk-A2PZBHTA.js";
+import "./chunk-JNR4T6LZ.js";
+import "./chunk-UAO52LUL.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  Arc
+};

package/dist/atom.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { EasingProps } from './easing.js';
+import { SpinnerProps } from './types.js';
+import './motion.js';
+
+interface AtomProps extends SpinnerProps, EasingProps {
+}
+declare function Atom({ easing, ...rest }: AtomProps): react.JSX.Element;
+
+export { Atom, type AtomProps };

package/dist/atom.js

@@ -0,0 +1,9 @@
+import {
+  Atom
+} from "./chunk-BAVSTTWG.js";
+import "./chunk-A2PZBHTA.js";
+import "./chunk-UAO52LUL.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  Atom
+};

package/dist/blocks.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { SpinnerProps } from './types.js';
+
+type BlocksSweep = "columns" | "diagonal" | "rows";
+declare const DEFAULT_BLOCKS_SWEEP: BlocksSweep;
+interface BlocksProps extends SpinnerProps {
+    sweep?: BlocksSweep;
+}
+declare function Blocks({ sweep, ...rest }: BlocksProps): react.JSX.Element;
+
+export { Blocks, type BlocksProps, type BlocksSweep, DEFAULT_BLOCKS_SWEEP };

package/dist/blocks.js

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

package/dist/bouncing-dots.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { SpinnerProps } from './types.js';
+
+declare function BouncingDots(props: SpinnerProps): react.JSX.Element;
+
+export { BouncingDots };

package/dist/bouncing-dots.js

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

package/dist/cap.d.ts

@@ -0,0 +1,8 @@
+type Cap = "flat" | "round";
+declare const DEFAULT_CAP: Cap;
+interface CapProps {
+    cap?: Cap;
+}
+declare function linecap(cap?: Cap): "butt" | "round";
+
+export { type Cap, type CapProps, DEFAULT_CAP, linecap };

package/dist/cap.js

@@ -0,0 +1,8 @@
+import {
+  DEFAULT_CAP,
+  linecap
+} from "./chunk-JNR4T6LZ.js";
+export {
+  DEFAULT_CAP,
+  linecap
+};

package/dist/cascade.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { CapProps } from './cap.js';
+import { SpinnerProps } from './types.js';
+
+interface CascadeProps extends SpinnerProps, CapProps {
+}
+declare function Cascade({ cap, ...rest }: CascadeProps): react.JSX.Element;
+
+export { Cascade, type CascadeProps };

package/dist/cascade.js

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

package/dist/chunk-2LMGBBRJ.js

@@ -0,0 +1,77 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE,
+  STEP_VAR,
+  animation,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/eclipse.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DOTS = [0, 1];
+var css = `
+.ld-eclipse {
+  position: relative;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-eclipse-dot {
+  position: absolute;
+  top: 30%;
+  left: 30%;
+  width: 40%;
+  height: 40%;
+  background: currentColor;
+  border-radius: 50%;
+  ${animation("eclipse", ["ld-eclipse-slide", "ld-eclipse-depth"], "ease-in-out")}
+  animation-delay: ${stagger("eclipse", DOTS.length)};
+}
+
+@keyframes ld-eclipse-slide {
+  0%,
+  100% {
+    translate: 75% 0;
+  }
+  50% {
+    translate: -75% 0;
+  }
+}
+
+@keyframes ld-eclipse-depth {
+  0%,
+  50%,
+  100% {
+    opacity: 0.75;
+    scale: 1;
+  }
+  25% {
+    opacity: 1;
+    scale: 1.3;
+  }
+  75% {
+    opacity: 0.5;
+    scale: 0.7;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-eclipse-dot {
+    translate: calc(var(${STEP_VAR}) * 150% - 75%) 0;
+  }
+}
+`;
+function Eclipse(props) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "eclipse", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("eclipse", props), children: DOTS.map((index) => /* @__PURE__ */ jsx("div", { className: "ld-eclipse-dot", style: step(index) }, index)) })
+  ] });
+}
+
+export {
+  Eclipse
+};

package/dist/chunk-2OX27TAE.js

@@ -0,0 +1,69 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-A2PZBHTA.js";
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE
+} from "./chunk-OMNMMKI7.js";
+
+// src/radar.tsx
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-radar {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${rotationCss("radar")}
+`;
+function Radar({ easing, ...rest }) {
+  const beamGradient = useId();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "radar", children: css }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ...spinnerRoot("radar", rest),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 16 16",
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+            "radialGradient",
+            {
+              cx: "8",
+              cy: "8",
+              gradientUnits: "userSpaceOnUse",
+              id: beamGradient,
+              r: "8",
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0.3334", stopColor: "currentColor" }),
+                /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", fill: "currentColor", opacity: "0.2", r: "8" }),
+          /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", opacity: "0.2", r: "5.5", stroke: "currentColor" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: spinClass("radar", easing),
+              d: "M8 0C9.50657 0 10.9824 0.425672 12.2578 1.22754C13.5333 2.02953 14.557 3.17533 15.21 4.5332C15.8629 5.89107 16.1193 7.40626 15.9492 8.90332C15.7791 10.4001 15.1896 11.8184 14.249 12.9951L10.4707 9.69922C10.8037 9.21598 11 8.63123 11 8C11 6.34315 9.65685 5 8 5V0Z",
+              fill: `url(#${beamGradient})`
+            }
+          ),
+          /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", fill: "currentColor", r: "2" })
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  Radar
+};

package/dist/chunk-2TYML5J2.js

@@ -0,0 +1,51 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-A2PZBHTA.js";
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE
+} from "./chunk-OMNMMKI7.js";
+
+// src/clock.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-clock {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${rotationCss("clock")}
+`;
+function Clock({ easing, ...rest }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "clock", children: css }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ...spinnerRoot("clock", rest),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 16 16",
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", fill: "currentColor", opacity: "0.1", r: "8" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: spinClass("clock", easing),
+              d: "M11.1937 2.92061C10.5206 2.49739 9.77304 2.21397 8.9954 2.08314C8.45076 1.99151 8 2.44772 8 3V7.20324C8 7.49211 8.12492 7.76686 8.34259 7.95677L11.8999 11.0603C12.3287 11.4344 12.9913 11.378 13.2643 10.8787C13.6356 10.1998 13.8736 9.45248 13.9617 8.67713C14.0892 7.55433 13.8971 6.41834 13.4074 5.39993C12.9177 4.38152 12.1503 3.5221 11.1937 2.92061Z",
+              fill: "currentColor"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  Clock
+};

package/dist/chunk-3WMZVDPS.js

@@ -0,0 +1,61 @@
+import {
+  fadeCss
+} from "./chunk-PVVWLDIS.js";
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE
+} from "./chunk-OMNMMKI7.js";
+
+// src/circular-dots.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DOTS = [
+  [8, 1.5],
+  [12.5962, 3.4038],
+  [14.5, 8],
+  [12.5962, 12.5962],
+  [8, 14.5],
+  [3.4038, 12.5962],
+  [1.5, 8],
+  [3.4038, 3.4038]
+];
+var css = `
+.ld-circular-dots {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${fadeCss("circular-dots", "dot", DOTS.length, { dim: 0.2, rest: 0.6 })}
+`;
+function CircularDots(props) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "circular-dots", children: css }),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ...spinnerRoot("circular-dots", props),
+        fill: "currentColor",
+        role: "presentation",
+        viewBox: "0 0 16 16",
+        children: DOTS.map(([cx, cy], index) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "ld-circular-dots-dot",
+            cx,
+            cy,
+            r: "1.5",
+            style: step(index)
+          },
+          `${cx}-${cy}`
+        ))
+      }
+    )
+  ] });
+}
+
+export {
+  CircularDots
+};

package/dist/chunk-4O4ADYWE.js

@@ -0,0 +1,73 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE,
+  STEP_VAR,
+  animation,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/leap.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DOTS = Array.from({ length: 3 }, (_, index) => index);
+var css = `
+.ld-leap {
+  --ld-leap-dot: round(calc(${SIZE} * 0.22), 1px);
+  --ld-leap-gap: round(down, calc((${SIZE} - var(--ld-leap-dot)) / 2), 1px);
+  position: relative;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-leap-wrapper {
+  position: absolute;
+  top: round(calc((${SIZE} - var(--ld-leap-dot)) / 2), 1px);
+  left: calc(${SIZE} - var(--ld-leap-dot) - var(--ld-leap-gap) * 2);
+  width: calc(var(--ld-leap-gap) * 2 + var(--ld-leap-dot));
+  height: var(--ld-leap-dot);
+  ${animation("leap", "ld-leap-hop", "ease-in-out")}
+  animation-delay: ${stagger("leap", DOTS.length)};
+}
+
+.ld-leap-dot {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: var(--ld-leap-dot);
+  background: currentColor;
+  border-radius: 50%;
+}
+
+@keyframes ld-leap-hop {
+  0% {
+    transform: translateX(0) rotate(0);
+  }
+  33.33% {
+    transform: translateX(0) rotate(180deg);
+  }
+  66.66% {
+    transform: translateX(calc(var(--ld-leap-gap) * -1)) rotate(180deg);
+  }
+  100% {
+    transform: translateX(calc(var(--ld-leap-gap) * -2)) rotate(180deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-leap-wrapper {
+    transform: translateX(calc(var(${STEP_VAR}) * var(--ld-leap-gap)));
+  }
+}
+`;
+function Leap(props) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "leap", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("leap", props), children: DOTS.map((index) => /* @__PURE__ */ jsx("div", { className: "ld-leap-wrapper", style: step(index), children: /* @__PURE__ */ jsx("div", { className: "ld-leap-dot" }) }, index)) })
+  ] });
+}
+
+export {
+  Leap
+};

package/dist/chunk-5UAEBEER.js

@@ -0,0 +1,78 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-A2PZBHTA.js";
+import {
+  linecap
+} from "./chunk-JNR4T6LZ.js";
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE
+} from "./chunk-OMNMMKI7.js";
+
+// src/dual.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-dual {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${rotationCss("dual")}
+
+.ld-dual-inner {
+  animation-direction: reverse;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-dual-inner {
+    transform: rotate(180deg);
+  }
+}
+`;
+function Dual({ cap, easing, ...rest }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "dual", children: css }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ...spinnerRoot("dual", rest),
+        fill: "none",
+        role: "presentation",
+        stroke: "currentColor",
+        strokeLinecap: linecap(cap),
+        strokeWidth: "2.5",
+        viewBox: "0 0 24 24",
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: spinClass("dual", easing),
+              cx: "12",
+              cy: "12",
+              r: "10",
+              strokeDasharray: "18 44.8"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: `ld-dual-inner ${spinClass("dual", easing)}`,
+              cx: "12",
+              cy: "12",
+              r: "5.5",
+              strokeDasharray: "10 24.6"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  Dual
+};

package/dist/chunk-A2PZBHTA.js

@@ -0,0 +1,41 @@
+import {
+  animation
+} from "./chunk-OMNMMKI7.js";
+
+// src/easing.ts
+var DEFAULT_EASING = "linear";
+function spinClass(name, easing = DEFAULT_EASING) {
+  const base = `ld-${name}-spin`;
+  return easing === "linear" ? base : `${base} ${base}-${easing}`;
+}
+var ROTATE = `to {
+    transform: rotate(360deg);
+  }`;
+function rotationCss(name, turn = ROTATE) {
+  return `
+.ld-${name}-spin {
+  transform-origin: center;
+  ${animation(name, `ld-${name}-rotate`, "linear")}
+}
+
+.ld-${name}-spin-ease-in-out {
+  animation-timing-function: ease-in-out;
+}
+
+.ld-${name}-spin-stacked {
+  animation-name: ld-${name}-rotate, ld-${name}-rotate;
+  animation-timing-function: linear, ease-in-out;
+  animation-composition: add;
+}
+
+@keyframes ld-${name}-rotate {
+  ${turn}
+}
+`;
+}
+
+export {
+  DEFAULT_EASING,
+  spinClass,
+  rotationCss
+};