loading-dev 0.3.5 → 0.3.7

package/dist/ring.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 RingProps extends SpinnerProps, EasingProps, CapProps {
-}
-declare function Ring({ cap, easing, ...rest }: RingProps): react.JSX.Element;
-
-export { Ring, type RingProps };
+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 RingProps extends SpinnerProps, EasingProps, CapProps {}
+export declare function Ring({ cap, easing, ...rest }: RingProps): import("react").JSX.Element;

package/dist/ring.js

@@ -1,10 +1,37 @@
-import {
-  Ring
-} from "./chunk-L2DUMHO4.js";
-import "./chunk-A2PZBHTA.js";
-import "./chunk-JNR4T6LZ.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Ring
-};
+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/ring.tsx
+const css = `
+${rotationCss("ring")}
+`;
+function Ring({ cap, easing, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "ring",
+		children: css
+	}), /* @__PURE__ */ jsxs("svg", {
+		...spinnerRoot("ring", rest),
+		fill: "none",
+		role: "presentation",
+		viewBox: "0 0 24 24",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			opacity: "0.2",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "2.5"
+		}), /* @__PURE__ */ jsx("circle", {
+			className: spinClass("ring", easing),
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeDasharray: "16 46.8",
+			strokeLinecap: linecap(cap),
+			strokeWidth: "2.5"
+		})]
+	})] });
+}
+export { Ring };

package/dist/ripple.d.ts

@@ -1,11 +1,7 @@
-import * as react from 'react';
-import { SpinnerProps } from './types.js';
-
-type RippleDirection = "in" | "out";
-declare const DEFAULT_RIPPLE_DIRECTION: RippleDirection;
-interface RippleProps extends SpinnerProps {
-    direction?: RippleDirection;
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export type RippleDirection = "in" | "out";
+export declare const DEFAULT_RIPPLE_DIRECTION: RippleDirection;
+export interface RippleProps extends SpinnerProps {
+  direction?: RippleDirection;
 }
-declare function Ripple({ direction, ...rest }: RippleProps): react.JSX.Element;
-
-export { DEFAULT_RIPPLE_DIRECTION, Ripple, type RippleDirection, type RippleProps };
+export declare function Ripple({ direction, ...rest }: RippleProps): import("react").JSX.Element;

package/dist/ripple.js

@@ -1,10 +1,56 @@
-import {
-  DEFAULT_RIPPLE_DIRECTION,
-  Ripple
-} from "./chunk-FQ2U2M7F.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  DEFAULT_RIPPLE_DIRECTION,
-  Ripple
-};
+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/ripple.tsx
+const DEFAULT_RIPPLE_DIRECTION = "out";
+const RINGS = Array.from({ length: 3 }, (_, index) => index);
+const css = `
+.ld-ripple {
+  position: relative;
+}
+
+.ld-ripple-ring {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: calc(${SIZE} * 0.08) solid currentColor;
+  border-radius: 9999px;
+  ${animation("ripple", "ld-ripple-spread", "ease-out")}
+  animation-delay: ${stagger("ripple", RINGS.length)};
+}
+
+.ld-ripple-ring-in {
+  animation-direction: reverse;
+}
+
+@keyframes ld-ripple-spread {
+  from {
+    opacity: 1;
+    transform: scale(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-ripple-ring {
+    opacity: 0.4;
+    transform: scale(calc((var(${STEP_VAR}) + 1) / ${RINGS.length}));
+  }
+}
+`;
+function Ripple({ direction = "out", ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "ripple",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("ripple", rest),
+		children: RINGS.map((index) => /* @__PURE__ */ jsx("div", {
+			className: `ld-ripple-ring ld-ripple-ring-${direction}`,
+			style: step(index)
+		}, index))
+	})] });
+}
+export { DEFAULT_RIPPLE_DIRECTION, Ripple };

package/dist/scan.d.ts

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

package/dist/scan.js

@@ -0,0 +1,56 @@
+import { animation } from "./motion.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/scan.tsx
+const TRAVEL = 11;
+const css = `
+.ld-scan-line {
+  ${animation("scan", "ld-scan-sweep", "cubic-bezier(0.45, 0, 0.55, 1)")}
+}
+
+@keyframes ld-scan-sweep {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(${TRAVEL}px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-scan-line {
+    transform: translateY(${TRAVEL / 2}px);
+  }
+}
+`;
+function Scan(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "scan",
+		children: css
+	}), /* @__PURE__ */ jsxs("svg", {
+		...spinnerRoot("scan", props),
+		fill: "none",
+		role: "presentation",
+		stroke: "currentColor",
+		viewBox: "0 0 24 24",
+		children: [/* @__PURE__ */ jsx("rect", {
+			height: "18",
+			opacity: "0.2",
+			rx: "4",
+			strokeWidth: "2",
+			width: "18",
+			x: "3",
+			y: "3"
+		}), /* @__PURE__ */ jsx("line", {
+			className: "ld-scan-line",
+			strokeLinecap: "round",
+			strokeWidth: "2.5",
+			x1: "7.5",
+			x2: "16.5",
+			y1: "6.5",
+			y2: "6.5"
+		})]
+	})] });
+}
+export { Scan };

package/dist/slide.d.ts

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

package/dist/slide.js

@@ -1,8 +1,73 @@
-import {
-  Slide
-} from "./chunk-BCIAMPLU.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Slide
-};
+import { animation, stagger } from "./motion.js";
+import { SpinnerStyle, cssVars, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/slide.tsx
+const DOT = 34;
+const MARGIN = 6;
+const FAR = `${(54 / DOT * 100).toFixed(1)}%`;
+const RESTS = [
+	`translate(${FAR}, 0)`,
+	"translate(0, 0)",
+	`translate(0, ${FAR})`
+];
+const css = `
+.ld-slide {
+  position: relative;
+}
+
+.ld-slide-dot {
+  position: absolute;
+  top: ${MARGIN}%;
+  left: ${MARGIN}%;
+  width: ${DOT}%;
+  height: ${DOT}%;
+  background: currentColor;
+  border-radius: 50%;
+  ${animation("slide", "ld-slide-walk", "ease-in-out")}
+  animation-delay: ${stagger("slide", RESTS.length)};
+}
+
+@keyframes ld-slide-walk {
+  0% {
+    transform: translate(${FAR}, 0);
+  }
+  8.33%,
+  25% {
+    transform: translate(${FAR}, ${FAR});
+  }
+  33.33%,
+  50% {
+    transform: translate(0, ${FAR});
+  }
+  58.33%,
+  75% {
+    transform: translate(0, 0);
+  }
+  83.33%,
+  100% {
+    transform: translate(${FAR}, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-slide-dot {
+    transform: var(--ld-slide-rest);
+  }
+}
+`;
+function Slide(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "slide",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("slide", props),
+		children: RESTS.map((rest, index) => /* @__PURE__ */ jsx("div", {
+			className: "ld-slide-dot",
+			style: cssVars({
+				...step(index),
+				"--ld-slide-rest": rest
+			})
+		}, rest))
+	})] });
+}
+export { Slide };

package/dist/snake.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 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-B_Mo1a7N.js";
+import { r as EasingProps } from "./easing-BM_1QWrA.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export interface SnakeProps extends SpinnerProps, EasingProps, CapProps {}
+export declare function Snake({ cap, easing, ...rest }: SnakeProps): import("react").JSX.Element;

package/dist/snake.js

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

package/dist/spinners.d.ts

@@ -1,68 +1,74 @@
-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;
-};
-
-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 { Chevrons } from "./chevrons.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 { 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";
+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;
+  clock: typeof Clock;
+  comet: typeof Comet;
+  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;
+};

package/dist/spinners.js

@@ -1,40 +1,76 @@
-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 { Chevrons } from "./chevrons.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 { 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";
+// 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,
+	clock: Clock,
+	comet: Comet,
+	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
 };
+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;