loading-dev 0.3.5 → 0.3.7

package/dist/split.js

@@ -0,0 +1,52 @@
+import { STEP_VAR, animation } from "./motion.js";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/split.tsx
+const DOTS = [0, 1];
+const APART = `calc((var(${STEP_VAR}) * 2 - 1) * 5px) 0`;
+const css = `
+.ld-split-dot {
+  transform-box: fill-box;
+  transform-origin: center;
+  ${animation("split", "ld-split-part", "cubic-bezier(0.65, 0, 0.35, 1)")}
+}
+
+@keyframes ld-split-part {
+  0%,
+  100% {
+    translate: 0 0;
+    scale: 1;
+  }
+  40%,
+  60% {
+    translate: ${APART};
+    scale: 0.65;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-split-dot {
+    translate: ${APART};
+    scale: 0.65;
+  }
+}
+`;
+function Split(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "split",
+		children: css
+	}), /* @__PURE__ */ jsx("svg", {
+		...spinnerRoot("split", props),
+		fill: "currentColor",
+		role: "presentation",
+		viewBox: "0 0 24 24",
+		children: DOTS.map((dot) => /* @__PURE__ */ jsx("circle", {
+			className: "ld-split-dot",
+			cx: "12",
+			cy: "12",
+			r: "4",
+			style: step(dot)
+		}, dot))
+	})] });
+}
+export { Split };

package/dist/steps.d.ts

@@ -0,0 +1,2 @@
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export declare function Steps(props: SpinnerProps): import("react").JSX.Element;

package/dist/steps.js

@@ -0,0 +1,55 @@
+import { STEP_VAR, animation, stagger } from "./motion.js";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/steps.tsx
+const SEGMENTS = [
+	1,
+	7,
+	13,
+	19
+];
+const SLOTS = SEGMENTS.length * 2;
+const css = `
+.ld-steps-segment {
+  ${animation("steps", "ld-steps-light", "linear")}
+  animation-delay: ${stagger("steps", SLOTS)};
+}
+
+@keyframes ld-steps-light {
+  0%,
+  55% {
+    opacity: 1;
+  }
+  60%,
+  100% {
+    opacity: 0.15;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-steps-segment {
+    opacity: calc(1 - var(${STEP_VAR}) * 0.25);
+  }
+}
+`;
+function Steps(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "steps",
+		children: css
+	}), /* @__PURE__ */ jsx("svg", {
+		...spinnerRoot("steps", props),
+		fill: "currentColor",
+		role: "presentation",
+		viewBox: "0 0 24 24",
+		children: SEGMENTS.map((x, index) => /* @__PURE__ */ jsx("rect", {
+			className: "ld-steps-segment",
+			height: "6",
+			rx: "1.25",
+			style: step(index),
+			width: "4",
+			x,
+			y: "9"
+		}, x))
+	})] });
+}
+export { Steps };

package/dist/swirl.d.ts

@@ -1,6 +1,2 @@
-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-D9_cXnjI.js";
+export declare function Swirl(props: SpinnerProps): import("react").JSX.Element;

package/dist/swirl.js

@@ -1,9 +1,49 @@
-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";
+// 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))
+	})] });
+}
+export { Swirl };

package/dist/trace.d.ts

@@ -1,11 +1,5 @@
-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-B_Mo1a7N.js";
+import { r as EasingProps } from "./easing-BM_1QWrA.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export interface TraceProps extends SpinnerProps, EasingProps, CapProps {}
+export declare function Trace({ cap, easing, ...rest }: TraceProps): import("react").JSX.Element;

package/dist/trace.js

@@ -1,10 +1,45 @@
-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";
+// 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)
+		})]
+	})] });
+}
+export { Trace };

package/dist/types-D9_cXnjI.d.ts

@@ -0,0 +1,8 @@
+interface SpinnerProps {
+  className?: string;
+  color?: string;
+  duration?: number;
+  playState?: "paused" | "running";
+  size?: number;
+}
+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-D9_cXnjI.js";
+export { SpinnerProps };

package/dist/types.js

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

package/dist/wave.d.ts

@@ -1,11 +1,7 @@
-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-D9_cXnjI.js";
+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;

package/dist/wave.js

@@ -1,10 +1,55 @@
-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";
+// 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))
+	})] });
+}
+export { DEFAULT_WAVE_ORIGIN, Wave };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loading-dev",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "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.90.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "tsdown": "^0.23.3",
+    "typescript": "^7.0.2",
+    "ultracite": "8.1.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-2LMGBBRJ.js

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

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

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

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