loading-dev 0.3.6 → 0.3.8

package/dist/spinners.d.ts

@@ -3,6 +3,7 @@ import { Atom } from "./atom.js";
 import { Blocks } from "./blocks.js";
 import { BouncingDots } from "./bouncing-dots.js";
 import { Cascade } from "./cascade.js";
+import { Chevrons } from "./chevrons.js";
 import { CircularDots } from "./circular-dots.js";
 import { ClassicV2 } from "./classic-v2.js";
 import { Classic } from "./classic.js";
@@ -11,29 +12,35 @@ import { Comet } from "./comet.js";
 import { Compass } from "./compass.js";
 import { Dual } from "./dual.js";
 import { Eclipse } from "./eclipse.js";
+import { Fill } from "./fill.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 { Loop } from "./loop.js";
 import { Morph } from "./morph.js";
 import { Orbit } from "./orbit.js";
+import { Phases } from "./phases.js";
 import { Pulse } from "./pulse.js";
 import { Radar } from "./radar.js";
 import { Ring } from "./ring.js";
 import { Ripple } from "./ripple.js";
+import { Scan } from "./scan.js";
 import { Slide } from "./slide.js";
 import { Snake } from "./snake.js";
+import { Split } from "./split.js";
+import { Steps } from "./steps.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;
+  chevrons: typeof Chevrons;
   "circular-dots": typeof CircularDots;
   classic: typeof Classic;
   "classic-v2": typeof ClassicV2;
@@ -42,21 +49,26 @@ export declare const SPINNERS: {
   compass: typeof Compass;
   dual: typeof Dual;
   eclipse: typeof Eclipse;
+  fill: typeof Fill;
   flip: typeof Flip;
   gather: typeof Gather;
   leap: typeof Leap;
   "linear-dots": typeof LinearDots;
   loading: typeof Loading;
+  loop: typeof Loop;
   morph: typeof Morph;
   orbit: typeof Orbit;
+  phases: typeof Phases;
   pulse: typeof Pulse;
   radar: typeof Radar;
   ring: typeof Ring;
   ripple: typeof Ripple;
+  scan: typeof Scan;
   slide: typeof Slide;
   snake: typeof Snake;
+  split: typeof Split;
+  steps: typeof Steps;
   swirl: typeof Swirl;
   trace: typeof Trace;
   wave: typeof Wave;
-};
-//#endregion
+};

package/dist/spinners.js

@@ -3,6 +3,7 @@ import { Atom } from "./atom.js";
 import { Blocks } from "./blocks.js";
 import { BouncingDots } from "./bouncing-dots.js";
 import { Cascade } from "./cascade.js";
+import { Chevrons } from "./chevrons.js";
 import { CircularDots } from "./circular-dots.js";
 import { ClassicV2 } from "./classic-v2.js";
 import { Classic } from "./classic.js";
@@ -11,29 +12,36 @@ import { Comet } from "./comet.js";
 import { Compass } from "./compass.js";
 import { Dual } from "./dual.js";
 import { Eclipse } from "./eclipse.js";
+import { Fill } from "./fill.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 { Loop } from "./loop.js";
 import { Morph } from "./morph.js";
 import { Orbit } from "./orbit.js";
+import { Phases } from "./phases.js";
 import { Pulse } from "./pulse.js";
 import { Radar } from "./radar.js";
 import { Ring } from "./ring.js";
 import { Ripple } from "./ripple.js";
+import { Scan } from "./scan.js";
 import { Slide } from "./slide.js";
 import { Snake } from "./snake.js";
+import { Split } from "./split.js";
+import { Steps } from "./steps.js";
 import { Swirl } from "./swirl.js";
 import { Trace } from "./trace.js";
 import { Wave } from "./wave.js";
-//#region src/spinners.ts
+// src/spinners.ts
 const SPINNERS = {
 	arc: Arc,
 	atom: Atom,
 	blocks: Blocks,
 	"bouncing-dots": BouncingDots,
 	cascade: Cascade,
+	chevrons: Chevrons,
 	"circular-dots": CircularDots,
 	classic: Classic,
 	"classic-v2": ClassicV2,
@@ -42,22 +50,27 @@ const SPINNERS = {
 	compass: Compass,
 	dual: Dual,
 	eclipse: Eclipse,
+	fill: Fill,
 	flip: Flip,
 	gather: Gather,
 	leap: Leap,
 	"linear-dots": LinearDots,
 	loading: Loading,
+	loop: Loop,
 	morph: Morph,
 	orbit: Orbit,
+	phases: Phases,
 	pulse: Pulse,
 	radar: Radar,
 	ring: Ring,
 	ripple: Ripple,
+	scan: Scan,
 	slide: Slide,
 	snake: Snake,
+	split: Split,
+	steps: Steps,
 	swirl: Swirl,
 	trace: Trace,
 	wave: Wave
 };
-//#endregion
 export { SPINNERS };

package/dist/split.d.ts

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

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,7 @@
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export type StepsRows = "double" | "single";
+export declare const DEFAULT_STEPS_ROWS: StepsRows;
+export interface StepsProps extends SpinnerProps {
+  rows?: StepsRows;
+}
+export declare function Steps({ rows, ...rest }: StepsProps): import("react").JSX.Element;

package/dist/steps.js

@@ -0,0 +1,60 @@
+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 DEFAULT_STEPS_ROWS = "single";
+const SEGMENTS = [
+	1,
+	7,
+	13,
+	19
+];
+const ROWS = {
+	double: [5, 13],
+	single: [9]
+};
+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({ rows = DEFAULT_STEPS_ROWS, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "steps",
+		children: css
+	}), /* @__PURE__ */ jsx("svg", {
+		...spinnerRoot("steps", rest),
+		fill: "currentColor",
+		role: "presentation",
+		viewBox: "0 0 24 24",
+		children: ROWS[rows].map((y) => SEGMENTS.map((x, index) => /* @__PURE__ */ jsx("rect", {
+			className: "ld-steps-segment",
+			height: "6",
+			rx: "1.25",
+			style: step(index),
+			width: "4",
+			x,
+			y
+		}, `${x}-${y}`)))
+	})] });
+}
+export { DEFAULT_STEPS_ROWS, Steps };

package/dist/swirl.d.ts

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

package/dist/swirl.js

@@ -2,7 +2,7 @@ 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
+// src/swirl.tsx
 const RING = [
 	0,
 	1,
@@ -46,5 +46,4 @@ function Swirl(props) {
 		}, index))
 	})] });
 }
-//#endregion
 export { Swirl };

package/dist/trace.d.ts

@@ -1,7 +1,5 @@
-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
+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;
-//#endregion
+export declare function Trace({ cap, easing, ...rest }: TraceProps): import("react").JSX.Element;

package/dist/trace.js

@@ -2,7 +2,7 @@ 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
+// src/trace.tsx
 const VIEW = 20;
 const SIDE = 17.5;
 const RADIUS = 4;
@@ -42,5 +42,4 @@ function Trace({ cap, easing, ...rest }) {
 		})]
 	})] });
 }
-//#endregion
 export { Trace };

package/dist/{types-BYaenrWm.d.ts → types-D9_cXnjI.d.ts}

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

package/dist/types.d.ts

@@ -1,2 +1,2 @@
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
 export { SpinnerProps };

package/dist/wave.d.ts

@@ -1,9 +1,7 @@
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/wave.d.ts
+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;
 }
-export declare function Wave({ origin, ...rest }: WaveProps): import("react").JSX.Element;
-//#endregion
+export declare function Wave({ origin, ...rest }: WaveProps): import("react").JSX.Element;

package/dist/wave.js

@@ -1,7 +1,7 @@
 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
+// src/wave.tsx
 const DEFAULT_WAVE_ORIGIN = "center";
 const BARS = Array.from({ length: 5 }, (_, index) => index);
 const css = `
@@ -52,5 +52,4 @@ function Wave({ origin = DEFAULT_WAVE_ORIGIN, ...rest }) {
 		}, index))
 	})] });
 }
-//#endregion
 export { DEFAULT_WAVE_ORIGIN, Wave };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loading-dev",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "A lightweight library full of beautiful loading indicators for React.",
   "keywords": [
     "react",
@@ -47,12 +47,12 @@
     "@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",
+    "oxlint": "1.90.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "tsdown": "^0.23.3",
     "typescript": "^7.0.2",
-    "ultracite": "8.0.0",
+    "ultracite": "8.1.0",
     "vitest": "^5.0.3"
   },
   "peerDependencies": {