loading-dev 0.3.5 → 0.3.6

package/dist/snake.d.ts

@@ -1,11 +1,7 @@
-import * as react from 'react';
-import { CapProps } from './cap.js';
-import { EasingProps } from './easing.js';
-import { SpinnerProps } from './types.js';
-import './motion.js';
-
-interface SnakeProps extends SpinnerProps, EasingProps, CapProps {
-}
-declare function Snake({ cap, easing, ...rest }: SnakeProps): react.JSX.Element;
-
-export { Snake, type SnakeProps };
+import { n as CapProps } from "./cap-Ba3uZx03.js";
+import { r as EasingProps } from "./easing-DhnLArHS.js";
+import { t as SpinnerProps } from "./types-BYaenrWm.js";
+//#region src/snake.d.ts
+export interface SnakeProps extends SpinnerProps, EasingProps, CapProps {}
+export declare function Snake({ cap, easing, ...rest }: SnakeProps): import("react").JSX.Element;
+//#endregion

package/dist/snake.js

@@ -1,10 +1,59 @@
-import {
-  Snake
-} from "./chunk-UOXB5QOZ.js";
-import "./chunk-A2PZBHTA.js";
-import "./chunk-JNR4T6LZ.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Snake
-};
+import { linecap } from "./cap.js";
+import { animation } from "./motion.js";
+import { rotationCss, spinClass } from "./easing.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/snake.tsx
+const css = `
+${rotationCss("snake")}
+
+.ld-snake-dash {
+  ${animation("snake", "ld-snake-stretch", "ease-in-out")}
+}
+
+@keyframes ld-snake-stretch {
+  0% {
+    stroke-dasharray: 1 100;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 45 100;
+    stroke-dashoffset: -17;
+  }
+  100% {
+    stroke-dasharray: 45 100;
+    stroke-dashoffset: -62;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-snake-dash {
+    stroke-dasharray: 18 100;
+  }
+}
+`;
+function Snake({ cap, easing, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "snake",
+		children: css
+	}), /* @__PURE__ */ jsx("svg", {
+		...spinnerRoot("snake", rest),
+		fill: "none",
+		role: "presentation",
+		viewBox: "0 0 24 24",
+		children: /* @__PURE__ */ jsx("g", {
+			className: spinClass("snake", easing),
+			children: /* @__PURE__ */ jsx("circle", {
+				className: "ld-snake-dash",
+				cx: "12",
+				cy: "12",
+				r: "10",
+				stroke: "currentColor",
+				strokeLinecap: linecap(cap),
+				strokeWidth: "2.5"
+			})
+		})
+	})] });
+}
+//#endregion
+export { Snake };

package/dist/spinners.d.ts

@@ -1,68 +1,62 @@
-import { Arc } from './arc.js';
-import { Atom } from './atom.js';
-import { Blocks } from './blocks.js';
-import { BouncingDots } from './bouncing-dots.js';
-import './cap.js';
-import { Cascade } from './cascade.js';
-import { CircularDots } from './circular-dots.js';
-import { Classic } from './classic.js';
-import { ClassicV2 } from './classic-v2.js';
-import { Clock } from './clock.js';
-import { Comet } from './comet.js';
-import { Compass } from './compass.js';
-import { Dual } from './dual.js';
-import './easing.js';
-import { Eclipse } from './eclipse.js';
-import { Flip } from './flip.js';
-import { Gather } from './gather.js';
-import { Leap } from './leap.js';
-import { LinearDots } from './linear-dots.js';
-import { Loading } from './loading.js';
-import { Morph } from './morph.js';
-import './motion.js';
-import { Orbit } from './orbit.js';
-import { Pulse } from './pulse.js';
-import { Radar } from './radar.js';
-import { Ring } from './ring.js';
-import { Ripple } from './ripple.js';
-import { Slide } from './slide.js';
-import { Snake } from './snake.js';
-import { Swirl } from './swirl.js';
-import { Trace } from './trace.js';
-import { Wave } from './wave.js';
-import './types.js';
-import 'react';
-
-declare const SPINNERS: {
-    arc: typeof Arc;
-    atom: typeof Atom;
-    blocks: typeof Blocks;
-    "bouncing-dots": typeof BouncingDots;
-    cascade: typeof Cascade;
-    "circular-dots": typeof CircularDots;
-    classic: typeof Classic;
-    "classic-v2": typeof ClassicV2;
-    clock: typeof Clock;
-    comet: typeof Comet;
-    compass: typeof Compass;
-    dual: typeof Dual;
-    eclipse: typeof Eclipse;
-    flip: typeof Flip;
-    gather: typeof Gather;
-    leap: typeof Leap;
-    "linear-dots": typeof LinearDots;
-    loading: typeof Loading;
-    morph: typeof Morph;
-    orbit: typeof Orbit;
-    pulse: typeof Pulse;
-    radar: typeof Radar;
-    ring: typeof Ring;
-    ripple: typeof Ripple;
-    slide: typeof Slide;
-    snake: typeof Snake;
-    swirl: typeof Swirl;
-    trace: typeof Trace;
-    wave: typeof Wave;
+import { Arc } from "./arc.js";
+import { Atom } from "./atom.js";
+import { Blocks } from "./blocks.js";
+import { BouncingDots } from "./bouncing-dots.js";
+import { Cascade } from "./cascade.js";
+import { CircularDots } from "./circular-dots.js";
+import { ClassicV2 } from "./classic-v2.js";
+import { Classic } from "./classic.js";
+import { Clock } from "./clock.js";
+import { Comet } from "./comet.js";
+import { Compass } from "./compass.js";
+import { Dual } from "./dual.js";
+import { Eclipse } from "./eclipse.js";
+import { Flip } from "./flip.js";
+import { Gather } from "./gather.js";
+import { Leap } from "./leap.js";
+import { LinearDots } from "./linear-dots.js";
+import { Loading } from "./loading.js";
+import { Morph } from "./morph.js";
+import { Orbit } from "./orbit.js";
+import { Pulse } from "./pulse.js";
+import { Radar } from "./radar.js";
+import { Ring } from "./ring.js";
+import { Ripple } from "./ripple.js";
+import { Slide } from "./slide.js";
+import { Snake } from "./snake.js";
+import { Swirl } from "./swirl.js";
+import { Trace } from "./trace.js";
+import { Wave } from "./wave.js";
+//#region src/spinners.d.ts
+export declare const SPINNERS: {
+  arc: typeof Arc;
+  atom: typeof Atom;
+  blocks: typeof Blocks;
+  "bouncing-dots": typeof BouncingDots;
+  cascade: typeof Cascade;
+  "circular-dots": typeof CircularDots;
+  classic: typeof Classic;
+  "classic-v2": typeof ClassicV2;
+  clock: typeof Clock;
+  comet: typeof Comet;
+  compass: typeof Compass;
+  dual: typeof Dual;
+  eclipse: typeof Eclipse;
+  flip: typeof Flip;
+  gather: typeof Gather;
+  leap: typeof Leap;
+  "linear-dots": typeof LinearDots;
+  loading: typeof Loading;
+  morph: typeof Morph;
+  orbit: typeof Orbit;
+  pulse: typeof Pulse;
+  radar: typeof Radar;
+  ring: typeof Ring;
+  ripple: typeof Ripple;
+  slide: typeof Slide;
+  snake: typeof Snake;
+  swirl: typeof Swirl;
+  trace: typeof Trace;
+  wave: typeof Wave;
 };
-
-export { SPINNERS };
+//#endregion

package/dist/spinners.js

@@ -1,40 +1,63 @@
-import {
-  SPINNERS
-} from "./chunk-HL7TIIDB.js";
-import "./chunk-SUUR5WMA.js";
-import "./chunk-KAZ5BTXC.js";
-import "./chunk-DKYEZLIN.js";
-import "./chunk-LDXBT62V.js";
-import "./chunk-PM6DU637.js";
-import "./chunk-2OX27TAE.js";
-import "./chunk-L2DUMHO4.js";
-import "./chunk-FQ2U2M7F.js";
-import "./chunk-BCIAMPLU.js";
-import "./chunk-UOXB5QOZ.js";
-import "./chunk-YIB63EKJ.js";
-import "./chunk-JKLL7YYG.js";
-import "./chunk-4O4ADYWE.js";
-import "./chunk-FWH6VWVK.js";
-import "./chunk-RAHAQ7XK.js";
-import "./chunk-P4BSSDSY.js";
-import "./chunk-IJJULNRU.js";
-import "./chunk-2TYML5J2.js";
-import "./chunk-UXTZTFNZ.js";
-import "./chunk-JQNF5GYA.js";
-import "./chunk-5UAEBEER.js";
-import "./chunk-2LMGBBRJ.js";
-import "./chunk-MAKBZTL3.js";
-import "./chunk-BAVSTTWG.js";
-import "./chunk-A2PZBHTA.js";
-import "./chunk-VZX7APSS.js";
-import "./chunk-ULWRXY3A.js";
-import "./chunk-KOYM24WV.js";
-import "./chunk-JNR4T6LZ.js";
-import "./chunk-3WMZVDPS.js";
-import "./chunk-R5ZDKN3Z.js";
-import "./chunk-PVVWLDIS.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  SPINNERS
+import { Arc } from "./arc.js";
+import { Atom } from "./atom.js";
+import { Blocks } from "./blocks.js";
+import { BouncingDots } from "./bouncing-dots.js";
+import { Cascade } from "./cascade.js";
+import { CircularDots } from "./circular-dots.js";
+import { ClassicV2 } from "./classic-v2.js";
+import { Classic } from "./classic.js";
+import { Clock } from "./clock.js";
+import { Comet } from "./comet.js";
+import { Compass } from "./compass.js";
+import { Dual } from "./dual.js";
+import { Eclipse } from "./eclipse.js";
+import { Flip } from "./flip.js";
+import { Gather } from "./gather.js";
+import { Leap } from "./leap.js";
+import { LinearDots } from "./linear-dots.js";
+import { Loading } from "./loading.js";
+import { Morph } from "./morph.js";
+import { Orbit } from "./orbit.js";
+import { Pulse } from "./pulse.js";
+import { Radar } from "./radar.js";
+import { Ring } from "./ring.js";
+import { Ripple } from "./ripple.js";
+import { Slide } from "./slide.js";
+import { Snake } from "./snake.js";
+import { Swirl } from "./swirl.js";
+import { Trace } from "./trace.js";
+import { Wave } from "./wave.js";
+//#region src/spinners.ts
+const 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
 };
+//#endregion
+export { SPINNERS };

package/dist/swirl.d.ts

@@ -1,6 +1,4 @@
-import * as react from 'react';
-import { SpinnerProps } from './types.js';
-
-declare function Swirl(props: SpinnerProps): react.JSX.Element;
-
-export { Swirl };
+import { t as SpinnerProps } from "./types-BYaenrWm.js";
+//#region src/swirl.d.ts
+export declare function Swirl(props: SpinnerProps): import("react").JSX.Element;
+//#endregion

package/dist/swirl.js

@@ -1,9 +1,50 @@
-import {
-  Swirl
-} from "./chunk-SUUR5WMA.js";
-import "./chunk-PVVWLDIS.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Swirl
-};
+import { SIZE } from "./motion.js";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { fadeCss } from "./fade.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/swirl.tsx
+const RING = [
+	0,
+	1,
+	2,
+	7,
+	null,
+	3,
+	6,
+	5,
+	4
+];
+const PLACES = RING.filter((place) => place !== null).length;
+const css = `
+.ld-swirl {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: calc(${SIZE} * 0.15625);
+  box-sizing: border-box;
+  padding: calc(${SIZE} * 0.0625);
+}
+
+.ld-swirl-cell {
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.0625);
+}
+${fadeCss("swirl", "cell", PLACES, {
+	dim: .2,
+	rest: .6
+})}
+`;
+function Swirl(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "swirl",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("swirl", props),
+		children: RING.map((place, index) => place === null ? /* @__PURE__ */ jsx("div", {}, index) : /* @__PURE__ */ jsx("div", {
+			className: "ld-swirl-cell",
+			style: step(place)
+		}, index))
+	})] });
+}
+//#endregion
+export { Swirl };

package/dist/trace.d.ts

@@ -1,11 +1,7 @@
-import * as react from 'react';
-import { CapProps } from './cap.js';
-import { EasingProps } from './easing.js';
-import { SpinnerProps } from './types.js';
-import './motion.js';
-
-interface TraceProps extends SpinnerProps, EasingProps, CapProps {
-}
-declare function Trace({ cap, easing, ...rest }: TraceProps): react.JSX.Element;
-
-export { Trace, type TraceProps };
+import { n as CapProps } from "./cap-Ba3uZx03.js";
+import { r as EasingProps } from "./easing-DhnLArHS.js";
+import { t as SpinnerProps } from "./types-BYaenrWm.js";
+//#region src/trace.d.ts
+export interface TraceProps extends SpinnerProps, EasingProps, CapProps {}
+export declare function Trace({ cap, easing, ...rest }: TraceProps): import("react").JSX.Element;
+//#endregion

package/dist/trace.js

@@ -1,10 +1,46 @@
-import {
-  Trace
-} from "./chunk-KAZ5BTXC.js";
-import "./chunk-A2PZBHTA.js";
-import "./chunk-JNR4T6LZ.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Trace
+import { linecap } from "./cap.js";
+import { rotationCss, spinClass } from "./easing.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/trace.tsx
+const VIEW = 20;
+const SIDE = 17.5;
+const RADIUS = 4;
+const PERIMETER = 38 + 2 * Math.PI * RADIUS;
+const DASH = 16;
+const RECT = {
+	height: SIDE,
+	rx: RADIUS,
+	width: SIDE,
+	x: 2.5 / 2,
+	y: 2.5 / 2
 };
+const css = `
+${rotationCss("trace", `to {
+    stroke-dashoffset: ${-PERIMETER};
+  }`)}
+`;
+function Trace({ cap, easing, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "trace",
+		children: css
+	}), /* @__PURE__ */ jsxs("svg", {
+		...spinnerRoot("trace", rest),
+		fill: "none",
+		role: "presentation",
+		stroke: "currentColor",
+		strokeWidth: "2.5",
+		viewBox: `0 0 ${VIEW} ${VIEW}`,
+		children: [/* @__PURE__ */ jsx("rect", {
+			...RECT,
+			opacity: "0.2"
+		}), /* @__PURE__ */ jsx("rect", {
+			...RECT,
+			className: spinClass("trace", easing),
+			strokeDasharray: `${DASH} ${PERIMETER - DASH}`,
+			strokeLinecap: linecap(cap)
+		})]
+	})] });
+}
+//#endregion
+export { Trace };

package/dist/types-BYaenrWm.d.ts

@@ -0,0 +1,10 @@
+//#region src/types.d.ts
+interface SpinnerProps {
+  className?: string;
+  color?: string;
+  duration?: number;
+  playState?: "paused" | "running";
+  size?: number;
+}
+//#endregion
+export { SpinnerProps as t };

package/dist/types.d.ts

@@ -1,9 +1,2 @@
-interface SpinnerProps {
-    className?: string;
-    color?: string;
-    duration?: number;
-    playState?: "paused" | "running";
-    size?: number;
-}
-
-export type { SpinnerProps };
+import { t as SpinnerProps } from "./types-BYaenrWm.js";
+export { SpinnerProps };

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/wave.d.ts

@@ -1,11 +1,9 @@
-import * as react from 'react';
-import { SpinnerProps } from './types.js';
-
-type WaveOrigin = "bottom" | "center";
-declare const DEFAULT_WAVE_ORIGIN: WaveOrigin;
-interface WaveProps extends SpinnerProps {
-    origin?: WaveOrigin;
+import { t as SpinnerProps } from "./types-BYaenrWm.js";
+//#region src/wave.d.ts
+export type WaveOrigin = "bottom" | "center";
+export declare const DEFAULT_WAVE_ORIGIN: WaveOrigin;
+export interface WaveProps extends SpinnerProps {
+  origin?: WaveOrigin;
 }
-declare function Wave({ origin, ...rest }: WaveProps): react.JSX.Element;
-
-export { DEFAULT_WAVE_ORIGIN, Wave, type WaveOrigin, type WaveProps };
+export declare function Wave({ origin, ...rest }: WaveProps): import("react").JSX.Element;
+//#endregion

package/dist/wave.js

@@ -1,10 +1,56 @@
-import {
-  DEFAULT_WAVE_ORIGIN,
-  Wave
-} from "./chunk-DKYEZLIN.js";
-import "./chunk-UAO52LUL.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.5",
+  "version": "0.3.6",
   "description": "A lightweight library full of beautiful loading indicators for React.",
   "keywords": [
     "react",
@@ -28,36 +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": "oxlint --fix . && biome check --write .",
     "format": "biome format --write .",
     "lint": "oxlint --deny-warnings --report-unused-disable-directives-severity error .",
-    "prepublishOnly": "tsup",
+    "prepublishOnly": "tsdown",
     "test": "vitest run",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit && pnpm build && pnpm --filter web typecheck"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.5.14",
-    "@types/node": "^24.19.0",
+    "@biomejs/biome": "^2.5.15",
+    "@types/node": "^26.6.4",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "oxlint": "1.85.0",
-    "react": "19.2.6",
-    "react-dom": "19.2.6",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3",
-    "ultracite": "7.12.0",
-    "vitest": "^4.1.11"
+    "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"
 }