loading-dev 0.3.4 → 0.3.6

package/dist/wave.js

@@ -1,10 +1,56 @@
-import {
-  DEFAULT_WAVE_ORIGIN,
-  Wave
-} from "./chunk-VBI53UGV.js";
-import "./chunk-VRX5ZYC6.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  DEFAULT_WAVE_ORIGIN,
-  Wave
-};
+import { SIZE, STEP_VAR, animation, stagger } from "./motion.js";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/wave.tsx
+const DEFAULT_WAVE_ORIGIN = "center";
+const BARS = Array.from({ length: 5 }, (_, index) => index);
+const css = `
+.ld-wave {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ld-wave-bar {
+  width: calc(${SIZE} * 0.12);
+  height: 100%;
+  background: currentColor;
+  border-radius: 9999px;
+  ${animation("wave", "ld-wave-rise", "ease-in-out")}
+  animation-delay: ${stagger("wave", BARS.length)};
+}
+
+.ld-wave-bar-bottom {
+  align-self: flex-end;
+}
+
+@keyframes ld-wave-rise {
+  0%,
+  100% {
+    height: 30%;
+  }
+  50% {
+    height: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-wave-bar {
+    height: calc((0.4 + var(${STEP_VAR}) * 0.15) * 100%);
+  }
+}
+`;
+function Wave({ origin = DEFAULT_WAVE_ORIGIN, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "wave",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("wave", rest),
+		children: BARS.map((index) => /* @__PURE__ */ jsx("div", {
+			className: `ld-wave-bar ld-wave-bar-${origin}`,
+			style: step(index)
+		}, index))
+	})] });
+}
+//#endregion
+export { DEFAULT_WAVE_ORIGIN, Wave };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loading-dev",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "A lightweight library full of beautiful loading indicators for React.",
   "keywords": [
     "react",
@@ -28,34 +28,36 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "tsdown",
     "build:web": "pnpm --filter web build",
+    "check": "pnpm lint && biome check --error-on-warnings .",
     "dev": "pnpm run \"/^dev:/\"",
-    "dev:lib": "tsup --watch src",
+    "dev:lib": "tsdown --watch src",
     "dev:web": "pnpm --filter web dev",
-    "fix": "biome check --write .",
+    "fix": "oxlint --fix . && biome check --write .",
     "format": "biome format --write .",
-    "lint": "biome check .",
-    "prepublishOnly": "tsup",
+    "lint": "oxlint --deny-warnings --report-unused-disable-directives-severity error .",
+    "prepublishOnly": "tsdown",
     "test": "vitest run",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit && pnpm build && pnpm --filter web typecheck"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.5.13",
-    "@types/node": "^24.13.3",
-    "@types/react": "^19",
-    "@types/react-dom": "^19.2.4",
-    "react": "19.2.6",
-    "react-dom": "19.2.6",
-    "tsup": "^8.5.0",
-    "typescript": "^5",
-    "ultracite": "^7.11.1",
-    "vitest": "^4.1.11"
+    "@biomejs/biome": "^2.5.15",
+    "@types/node": "^26.6.4",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "oxlint": "1.87.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "tsdown": "^0.23.0",
+    "typescript": "^7.0.2",
+    "ultracite": "8.0.0",
+    "vitest": "^5.0.3"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
-  "packageManager": "pnpm@11.8.0"
+  "packageManager": "pnpm@12.10.1"
 }

package/dist/chunk-5A6DX4J6.js

@@ -1,62 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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
-};