loading-dev 0.3.1 → 0.3.4

package/README.md

@@ -12,9 +12,9 @@ import { Arc } from "loading-dev";
 <Arc size={16} />
 ```
 
-You can set `size`, `color`, `duration` and `easing`. 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.
+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.
 
-Available: `Arc`, `BouncingDots`, `CircularDots`, `Classic`, `ClassicV2`, `Clock`, `Comet`, `Compass`, `LinearDots`, `Orbit`, `Pulse`, `Radar`, `Ring`, `Swirl`.
+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`.
 
 You can find docs and live previews at [loading.dev](https://loading.dev).
 

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-X7BJQCYL.js";
+import "./chunk-7C6Q6WUN.js";
+import "./chunk-JNR4T6LZ.js";
+import "./chunk-VRX5ZYC6.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-5DLURQGF.js";
+import "./chunk-7C6Q6WUN.js";
+import "./chunk-VRX5ZYC6.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-PBB2PRPT.js";
+import "./chunk-VRX5ZYC6.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-UWSCBISJ.js";
+import "./chunk-VRX5ZYC6.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-I5CFO2M5.js";
+import "./chunk-JNR4T6LZ.js";
+import "./chunk-VRX5ZYC6.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  Cascade
+};

package/dist/chunk-5A6DX4J6.js

@@ -0,0 +1,62 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-7C6Q6WUN.js";
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE
+} from "./chunk-OMNMMKI7.js";
+
+// src/comet.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-comet {
+  --ld-comet-stroke: calc(${SIZE} * 0.12);
+  position: relative;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-comet-spin {
+  position: absolute;
+  inset: 0;
+}
+
+.ld-comet-tail {
+  position: absolute;
+  inset: 0;
+  border-radius: 9999px;
+  background: conic-gradient(from 0deg, transparent, currentColor);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-comet-stroke)), #000 0);
+  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-comet-stroke)), #000 0);
+}
+
+.ld-comet-head {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: var(--ld-comet-stroke);
+  height: var(--ld-comet-stroke);
+  background: currentColor;
+  border-radius: 9999px;
+  transform: translateX(-50%);
+}
+
+${rotationCss("comet")}
+`;
+function Comet({ easing, ...rest }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "comet", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("comet", rest), children: /* @__PURE__ */ jsxs("div", { className: spinClass("comet", easing), children: [
+      /* @__PURE__ */ jsx("div", { className: "ld-comet-tail" }),
+      /* @__PURE__ */ jsx("div", { className: "ld-comet-head" })
+    ] }) })
+  ] });
+}
+
+export {
+  Comet
+};

package/dist/chunk-5DLURQGF.js

@@ -0,0 +1,88 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-7C6Q6WUN.js";
+import {
+  SpinnerStyle,
+  cssVars,
+  spinnerRoot,
+  step
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/atom.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ORBITS = Array.from({ length: 3 }, (_, index) => index);
+var TILT = 180 / ORBITS.length;
+var STROKE = `calc(${SIZE} * 0.055)`;
+var INNER_STROKE = `calc(${SIZE} * 0.045)`;
+var css = `
+.ld-atom {
+  position: relative;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-atom-shell {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: ${STROKE} solid currentColor;
+  border-radius: 9999px;
+}
+
+.ld-atom-orbit {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+  transform: rotate(var(--ld-atom-tilt)) rotateX(90deg);
+}
+
+.ld-atom-ring {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: ${INNER_STROKE} solid currentColor;
+  border-radius: 9999px;
+  transform: rotateX(90deg);
+}
+
+${rotationCss("atom")}
+
+.ld-atom-spin {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+  animation-delay: ${stagger("atom", ORBITS.length)};
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-atom-spin {
+    transform: rotate(${TILT}deg);
+  }
+}
+`;
+function Atom({ easing, ...rest }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "atom", children: css }),
+    /* @__PURE__ */ jsxs("div", { ...spinnerRoot("atom", rest), children: [
+      /* @__PURE__ */ jsx("div", { className: "ld-atom-shell" }),
+      ORBITS.map((index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ld-atom-orbit",
+          style: cssVars({ "--ld-atom-tilt": `${index * TILT}deg` }),
+          children: /* @__PURE__ */ jsx("div", { className: spinClass("atom", easing), style: step(index), children: /* @__PURE__ */ jsx("div", { className: "ld-atom-ring" }) })
+        },
+        index
+      ))
+    ] })
+  ] });
+}
+
+export {
+  Atom
+};

package/dist/chunk-5DS5PSRD.js

@@ -0,0 +1,124 @@
+import {
+  Swirl
+} from "./chunk-BMJ3AGRK.js";
+import {
+  Trace
+} from "./chunk-HDBQBCTN.js";
+import {
+  Wave
+} from "./chunk-VBI53UGV.js";
+import {
+  Orbit
+} from "./chunk-Y7QGIWTL.js";
+import {
+  Pulse
+} from "./chunk-FKUMWHUL.js";
+import {
+  Radar
+} from "./chunk-5LSP7MQQ.js";
+import {
+  Ring
+} from "./chunk-ZLJYYX76.js";
+import {
+  Ripple
+} from "./chunk-IWVH2GKE.js";
+import {
+  Slide
+} from "./chunk-IRMB7CHZ.js";
+import {
+  Snake
+} from "./chunk-RTKHVDCD.js";
+import {
+  Gather
+} from "./chunk-TFHDE6YZ.js";
+import {
+  Leap
+} from "./chunk-LIPOYJAI.js";
+import {
+  LinearDots
+} from "./chunk-K5XVX5GB.js";
+import {
+  Loading
+} from "./chunk-MVL7SVAH.js";
+import {
+  Morph
+} from "./chunk-AY4VLQBZ.js";
+import {
+  Classic
+} from "./chunk-IZ4TRHOC.js";
+import {
+  Clock
+} from "./chunk-IQ2WQZFY.js";
+import {
+  Comet
+} from "./chunk-5A6DX4J6.js";
+import {
+  Compass
+} from "./chunk-T7OV7MUW.js";
+import {
+  Dual
+} from "./chunk-NHN4FV63.js";
+import {
+  Eclipse
+} from "./chunk-AHW6IXXT.js";
+import {
+  Flip
+} from "./chunk-5R75HMWP.js";
+import {
+  Arc
+} from "./chunk-X7BJQCYL.js";
+import {
+  Atom
+} from "./chunk-5DLURQGF.js";
+import {
+  Blocks
+} from "./chunk-PBB2PRPT.js";
+import {
+  BouncingDots
+} from "./chunk-UWSCBISJ.js";
+import {
+  Cascade
+} from "./chunk-I5CFO2M5.js";
+import {
+  CircularDots
+} from "./chunk-A43AJR54.js";
+import {
+  ClassicV2
+} from "./chunk-T5EUYN7R.js";
+
+// src/spinners.ts
+var SPINNERS = {
+  arc: Arc,
+  atom: Atom,
+  blocks: Blocks,
+  "bouncing-dots": BouncingDots,
+  cascade: Cascade,
+  "circular-dots": CircularDots,
+  classic: Classic,
+  "classic-v2": ClassicV2,
+  clock: Clock,
+  comet: Comet,
+  compass: Compass,
+  dual: Dual,
+  eclipse: Eclipse,
+  flip: Flip,
+  gather: Gather,
+  leap: Leap,
+  "linear-dots": LinearDots,
+  loading: Loading,
+  morph: Morph,
+  orbit: Orbit,
+  pulse: Pulse,
+  radar: Radar,
+  ring: Ring,
+  ripple: Ripple,
+  slide: Slide,
+  snake: Snake,
+  swirl: Swirl,
+  trace: Trace,
+  wave: Wave
+};
+
+export {
+  SPINNERS
+};

package/dist/chunk-5LSP7MQQ.js

@@ -0,0 +1,69 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-7C6Q6WUN.js";
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-VRX5ZYC6.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-5R75HMWP.js

@@ -0,0 +1,55 @@
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  animation
+} from "./chunk-OMNMMKI7.js";
+
+// src/flip.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-flip {
+  width: ${SIZE};
+  height: ${SIZE};
+  perspective: calc(${SIZE} * 3);
+}
+
+.ld-flip-face {
+  width: 64%;
+  height: 64%;
+  margin: 18%;
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.06);
+  ${animation("flip", "ld-flip-turn", "ease-in-out")}
+}
+
+@keyframes ld-flip-turn {
+  0% {
+    transform: rotateX(0) rotateY(0);
+  }
+  50% {
+    transform: rotateX(-180deg) rotateY(0);
+  }
+  100% {
+    transform: rotateX(-180deg) rotateY(-180deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-flip-face {
+    animation: none;
+  }
+}
+`;
+function Flip(props) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "flip", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("flip", props), children: /* @__PURE__ */ jsx("div", { className: "ld-flip-face" }) })
+  ] });
+}
+
+export {
+  Flip
+};

package/dist/chunk-7C6Q6WUN.js

@@ -0,0 +1,47 @@
+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}
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-${name}-spin {
+    animation: none;
+  }
+}
+`;
+}
+
+export {
+  DEFAULT_EASING,
+  spinClass,
+  rotationCss
+};

package/dist/chunk-A43AJR54.js

@@ -0,0 +1,79 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  animation,
+  stagger
+} 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};
+}
+
+.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;
+  }
+}
+`;
+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
+};