loading-dev 0.3.4 → 0.3.6

package/dist/frame.js

@@ -1,13 +1,42 @@
-import {
-  SpinnerStyle,
-  cssVars,
-  spinnerRoot,
-  step
-} from "./chunk-VRX5ZYC6.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  SpinnerStyle,
-  cssVars,
-  spinnerRoot,
-  step
-};
+import { DURATION_VAR, PLAY_STATE_VAR, SIZE, SIZE_VAR, STEP_VAR } from "./motion.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/frame.tsx
+function SpinnerStyle({ children, name }) {
+	return /* @__PURE__ */ jsx("style", {
+		href: `ld-${name}`,
+		precedence: "loading-dev",
+		children: `
+.ld-${name} {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+${children}
+@media (prefers-reduced-motion: reduce) {
+  .ld-${name},
+  .ld-${name} * {
+    animation: none;
+  }
+}
+`
+	});
+}
+function cssVars(vars) {
+	return vars;
+}
+function step(index) {
+	return cssVars({ [STEP_VAR]: index });
+}
+function spinnerRoot(name, { className, color, duration, playState, size = 20 }) {
+	return {
+		"aria-hidden": true,
+		className: [`ld-${name}`, className].filter(Boolean).join(" "),
+		style: cssVars({
+			[SIZE_VAR]: `${size}px`,
+			...color === void 0 ? null : { color },
+			...duration === void 0 ? null : { [DURATION_VAR]: `${duration}ms` },
+			...playState === void 0 ? null : { [PLAY_STATE_VAR]: playState }
+		})
+	};
+}
+//#endregion
+export { SpinnerStyle, cssVars, spinnerRoot, step };

package/dist/gather.d.ts

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

package/dist/gather.js

@@ -1,8 +1,85 @@
-import {
-  Gather
-} from "./chunk-TFHDE6YZ.js";
-import "./chunk-VRX5ZYC6.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Gather
-};
+import { SIZE, animation } from "./motion.js";
+import { SpinnerStyle, cssVars, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/gather.tsx
+const BLOCKS = [
+	{
+		x: 1,
+		y: 1
+	},
+	{
+		x: -1,
+		y: 1
+	},
+	{
+		x: 1,
+		y: -1
+	},
+	{
+		x: -1,
+		y: -1
+	}
+];
+const GAP = 24;
+const PULL = `${(8 / 38 * 100).toFixed(1)}%`;
+const css = `
+.ld-gather-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: ${GAP}%;
+  width: 100%;
+  height: 100%;
+  ${animation("gather", "ld-gather-turn", "ease-in-out")}
+}
+
+.ld-gather-block {
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.14);
+  ${animation("gather", "ld-gather-pull", "ease-in-out")}
+}
+
+@keyframes ld-gather-pull {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+  30%,
+  60% {
+    transform: translate(
+      calc(var(--ld-gather-x) * ${PULL}),
+      calc(var(--ld-gather-y) * ${PULL})
+    );
+  }
+}
+
+@keyframes ld-gather-turn {
+  0%,
+  30% {
+    transform: rotate(0);
+  }
+  60%,
+  100% {
+    transform: rotate(90deg);
+  }
+}
+`;
+function Gather(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "gather",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("gather", props),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "ld-gather-group",
+			children: BLOCKS.map(({ x, y }) => /* @__PURE__ */ jsx("div", {
+				className: "ld-gather-block",
+				style: cssVars({
+					"--ld-gather-x": x,
+					"--ld-gather-y": y
+				})
+			}, `${x}${y}`))
+		})
+	})] });
+}
+//#endregion
+export { Gather };

package/dist/index.d.ts

@@ -1,35 +1,35 @@
-export { Arc, ArcProps } from './arc.js';
-export { Atom, AtomProps } from './atom.js';
-export { Blocks, BlocksProps, BlocksSweep, DEFAULT_BLOCKS_SWEEP } from './blocks.js';
-export { BouncingDots } from './bouncing-dots.js';
-export { Cap, CapProps, DEFAULT_CAP } from './cap.js';
-export { Cascade, CascadeProps } from './cascade.js';
-export { CircularDots } from './circular-dots.js';
-export { Classic } from './classic.js';
-export { ClassicV2 } from './classic-v2.js';
-export { Clock, ClockProps } from './clock.js';
-export { Comet, CometProps } from './comet.js';
-export { Compass } from './compass.js';
-export { Dual, DualProps } from './dual.js';
-export { DEFAULT_EASING, Easing, EasingProps } from './easing.js';
-export { Eclipse } from './eclipse.js';
-export { Flip } from './flip.js';
-export { Gather } from './gather.js';
-export { Leap } from './leap.js';
-export { LinearDots } from './linear-dots.js';
-export { Loading } from './loading.js';
-export { Morph } from './morph.js';
-export { DURATION_VAR, PLAY_STATE_VAR, SPINNER_MOTION, SpinnerName } from './motion.js';
-export { Orbit, OrbitProps } from './orbit.js';
-export { Pulse } from './pulse.js';
-export { Radar, RadarProps } from './radar.js';
-export { Ring, RingProps } from './ring.js';
-export { DEFAULT_RIPPLE_DIRECTION, Ripple, RippleDirection, RippleProps } from './ripple.js';
-export { Slide } from './slide.js';
-export { Snake, SnakeProps } from './snake.js';
-export { SPINNERS } from './spinners.js';
-export { Swirl } from './swirl.js';
-export { Trace, TraceProps } from './trace.js';
-export { SpinnerProps } from './types.js';
-export { DEFAULT_WAVE_ORIGIN, Wave, WaveOrigin, WaveProps } from './wave.js';
-import 'react';
+import { n as CapProps, r as DEFAULT_CAP, t as Cap } from "./cap-Ba3uZx03.js";
+import { i as PLAY_STATE_VAR, l as SpinnerName, n as DURATION_VAR, s as SPINNER_MOTION } from "./motion-D_zUuA3S.js";
+import { n as Easing, r as EasingProps, t as DEFAULT_EASING } from "./easing-DhnLArHS.js";
+import { t as SpinnerProps } from "./types-BYaenrWm.js";
+import { Arc, ArcProps } from "./arc.js";
+import { Atom, AtomProps } from "./atom.js";
+import { Blocks, BlocksProps, BlocksSweep, DEFAULT_BLOCKS_SWEEP } from "./blocks.js";
+import { BouncingDots } from "./bouncing-dots.js";
+import { Cascade, CascadeProps } from "./cascade.js";
+import { CircularDots } from "./circular-dots.js";
+import { ClassicV2 } from "./classic-v2.js";
+import { Classic } from "./classic.js";
+import { Clock, ClockProps } from "./clock.js";
+import { Comet, CometProps } from "./comet.js";
+import { Compass } from "./compass.js";
+import { Dual, DualProps } 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, OrbitProps } from "./orbit.js";
+import { Pulse } from "./pulse.js";
+import { Radar, RadarProps } from "./radar.js";
+import { Ring, RingProps } from "./ring.js";
+import { DEFAULT_RIPPLE_DIRECTION, Ripple, RippleDirection, RippleProps } from "./ripple.js";
+import { Slide } from "./slide.js";
+import { Snake, SnakeProps } from "./snake.js";
+import { Swirl } from "./swirl.js";
+import { Trace, TraceProps } from "./trace.js";
+import { DEFAULT_WAVE_ORIGIN, Wave, WaveOrigin, WaveProps } from "./wave.js";
+import { SPINNERS } from "./spinners.js";
+export { Arc, type ArcProps, Atom, type AtomProps, Blocks, type BlocksProps, type BlocksSweep, BouncingDots, type Cap, type CapProps, Cascade, type CascadeProps, CircularDots, Classic, ClassicV2, Clock, type ClockProps, Comet, type CometProps, Compass, DEFAULT_BLOCKS_SWEEP, DEFAULT_CAP, DEFAULT_EASING, DEFAULT_RIPPLE_DIRECTION, DEFAULT_WAVE_ORIGIN, DURATION_VAR, Dual, type DualProps, type Easing, type EasingProps, Eclipse, Flip, Gather, Leap, LinearDots, Loading, Morph, Orbit, type OrbitProps, PLAY_STATE_VAR, Pulse, Radar, type RadarProps, Ring, type RingProps, Ripple, type RippleDirection, type RippleProps, SPINNERS, SPINNER_MOTION, Slide, Snake, type SnakeProps, type SpinnerName, type SpinnerProps, Swirl, Trace, type TraceProps, Wave, type WaveOrigin, type WaveProps };

package/dist/index.js

@@ -1,145 +1,34 @@
-import {
-  SPINNERS
-} from "./chunk-5DS5PSRD.js";
-import {
-  Swirl
-} from "./chunk-BMJ3AGRK.js";
-import {
-  Trace
-} from "./chunk-HDBQBCTN.js";
-import {
-  DEFAULT_WAVE_ORIGIN,
-  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 {
-  DEFAULT_RIPPLE_DIRECTION,
-  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 {
-  DEFAULT_EASING
-} from "./chunk-7C6Q6WUN.js";
-import {
-  Blocks,
-  DEFAULT_BLOCKS_SWEEP
-} from "./chunk-PBB2PRPT.js";
-import {
-  BouncingDots
-} from "./chunk-UWSCBISJ.js";
-import {
-  Cascade
-} from "./chunk-I5CFO2M5.js";
-import {
-  DEFAULT_CAP
-} from "./chunk-JNR4T6LZ.js";
-import {
-  CircularDots
-} from "./chunk-A43AJR54.js";
-import {
-  ClassicV2
-} from "./chunk-T5EUYN7R.js";
-import "./chunk-VRX5ZYC6.js";
-import {
-  DURATION_VAR,
-  PLAY_STATE_VAR,
-  SPINNER_MOTION
-} from "./chunk-OMNMMKI7.js";
-export {
-  Arc,
-  Atom,
-  Blocks,
-  BouncingDots,
-  Cascade,
-  CircularDots,
-  Classic,
-  ClassicV2,
-  Clock,
-  Comet,
-  Compass,
-  DEFAULT_BLOCKS_SWEEP,
-  DEFAULT_CAP,
-  DEFAULT_EASING,
-  DEFAULT_RIPPLE_DIRECTION,
-  DEFAULT_WAVE_ORIGIN,
-  DURATION_VAR,
-  Dual,
-  Eclipse,
-  Flip,
-  Gather,
-  Leap,
-  LinearDots,
-  Loading,
-  Morph,
-  Orbit,
-  PLAY_STATE_VAR,
-  Pulse,
-  Radar,
-  Ring,
-  Ripple,
-  SPINNERS,
-  SPINNER_MOTION,
-  Slide,
-  Snake,
-  Swirl,
-  Trace,
-  Wave
-};
+import { DEFAULT_CAP } from "./cap.js";
+import { DURATION_VAR, PLAY_STATE_VAR, SPINNER_MOTION } from "./motion.js";
+import { DEFAULT_EASING } from "./easing.js";
+import { Arc } from "./arc.js";
+import { Atom } from "./atom.js";
+import { Blocks, DEFAULT_BLOCKS_SWEEP } 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 { DEFAULT_RIPPLE_DIRECTION, 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 { DEFAULT_WAVE_ORIGIN, Wave } from "./wave.js";
+import { SPINNERS } from "./spinners.js";
+export { Arc, Atom, Blocks, BouncingDots, Cascade, CircularDots, Classic, ClassicV2, Clock, Comet, Compass, DEFAULT_BLOCKS_SWEEP, DEFAULT_CAP, DEFAULT_EASING, DEFAULT_RIPPLE_DIRECTION, DEFAULT_WAVE_ORIGIN, DURATION_VAR, Dual, Eclipse, Flip, Gather, Leap, LinearDots, Loading, Morph, Orbit, PLAY_STATE_VAR, Pulse, Radar, Ring, Ripple, SPINNERS, SPINNER_MOTION, Slide, Snake, Swirl, Trace, Wave };

package/dist/leap.d.ts

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

package/dist/leap.js

@@ -1,8 +1,67 @@
-import {
-  Leap
-} from "./chunk-LIPOYJAI.js";
-import "./chunk-VRX5ZYC6.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Leap
-};
+import { SIZE, STEP_VAR, animation, stagger } from "./motion.js";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+//#region src/leap.tsx
+const DOTS = Array.from({ length: 3 }, (_, index) => index);
+const css = `
+.ld-leap {
+  --ld-leap-dot: round(calc(${SIZE} * 0.22), 1px);
+  --ld-leap-gap: round(down, calc((${SIZE} - var(--ld-leap-dot)) / 2), 1px);
+  position: relative;
+}
+
+.ld-leap-wrapper {
+  position: absolute;
+  top: round(calc((${SIZE} - var(--ld-leap-dot)) / 2), 1px);
+  left: calc(${SIZE} - var(--ld-leap-dot) - var(--ld-leap-gap) * 2);
+  width: calc(var(--ld-leap-gap) * 2 + var(--ld-leap-dot));
+  height: var(--ld-leap-dot);
+  ${animation("leap", "ld-leap-hop", "ease-in-out")}
+  animation-delay: ${stagger("leap", DOTS.length)};
+}
+
+.ld-leap-dot {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: var(--ld-leap-dot);
+  background: currentColor;
+  border-radius: 50%;
+}
+
+@keyframes ld-leap-hop {
+  0% {
+    transform: translateX(0) rotate(0);
+  }
+  33.33% {
+    transform: translateX(0) rotate(180deg);
+  }
+  66.66% {
+    transform: translateX(calc(var(--ld-leap-gap) * -1)) rotate(180deg);
+  }
+  100% {
+    transform: translateX(calc(var(--ld-leap-gap) * -2)) rotate(180deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-leap-wrapper {
+    transform: translateX(calc(var(${STEP_VAR}) * var(--ld-leap-gap)));
+  }
+}
+`;
+function Leap(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "leap",
+		children: css
+	}), /* @__PURE__ */ createElement("div", {
+		...spinnerRoot("leap", props),
+		key: props.size
+	}, DOTS.map((index) => /* @__PURE__ */ jsx("div", {
+		className: "ld-leap-wrapper",
+		style: step(index),
+		children: /* @__PURE__ */ jsx("div", { className: "ld-leap-dot" })
+	}, index)))] });
+}
+//#endregion
+export { Leap };

package/dist/linear-dots.d.ts

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

package/dist/linear-dots.js

@@ -1,8 +1,54 @@
-import {
-  LinearDots
-} from "./chunk-K5XVX5GB.js";
-import "./chunk-VRX5ZYC6.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  LinearDots
-};
+import { SIZE, animation, stagger } from "./motion.js";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/linear-dots.tsx
+const DOTS = Array.from({ length: 3 }, (_, index) => index);
+const css = `
+.ld-linear-dots {
+  display: flex;
+  align-items: center;
+  gap: calc(${SIZE} * 0.1875);
+  width: auto;
+}
+
+.ld-linear-dots-dot {
+  width: calc(${SIZE} * 0.1875);
+  height: calc(${SIZE} * 0.1875);
+  background: currentColor;
+  border-radius: 9999px;
+  ${animation("linear-dots", "ld-linear-dots-fade", "linear")}
+  animation-delay: ${stagger("linear-dots", DOTS.length)};
+}
+
+@keyframes ld-linear-dots-fade {
+  0% {
+    opacity: 1;
+  }
+  66.67% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-linear-dots-dot {
+    opacity: 0.75;
+  }
+}
+`;
+function LinearDots(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "linear-dots",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("linear-dots", props),
+		children: DOTS.map((dot) => /* @__PURE__ */ jsx("div", {
+			className: "ld-linear-dots-dot",
+			style: step(dot)
+		}, dot))
+	})] });
+}
+//#endregion
+export { LinearDots };

package/dist/loading.d.ts

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

package/dist/loading.js

@@ -1,8 +1,64 @@
-import {
-  Loading
-} from "./chunk-MVL7SVAH.js";
-import "./chunk-VRX5ZYC6.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Loading
-};
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { fadeCss } from "./fade.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/loading.tsx
+const BLOCK = "M0 0h1v1H0zM2 0h1v1H2zM0 2h1v1H0zM2 2h1v1H2z";
+const SEGMENTS = [
+	{
+		x: 12,
+		y: 6
+	},
+	{
+		x: 10,
+		y: 10
+	},
+	{
+		x: 6,
+		y: 12
+	},
+	{
+		x: 2,
+		y: 10
+	},
+	{
+		x: 0,
+		y: 6
+	},
+	{
+		x: 2,
+		y: 2
+	},
+	{
+		x: 6,
+		y: 0
+	},
+	{
+		x: 10,
+		y: 2
+	}
+];
+const css = `
+${fadeCss("loading", "segment", SEGMENTS.length, {
+	dim: .2,
+	rest: .6
+})}
+`;
+function Loading(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "loading",
+		children: css
+	}), /* @__PURE__ */ jsx("svg", {
+		...spinnerRoot("loading", props),
+		fill: "currentColor",
+		role: "presentation",
+		viewBox: "0 0 15 15",
+		children: SEGMENTS.map(({ x, y }, segment) => /* @__PURE__ */ jsx("path", {
+			className: "ld-loading-segment",
+			d: BLOCK,
+			style: step(segment),
+			transform: `translate(${x} ${y})`
+		}, `${x}-${y}`))
+	})] });
+}
+//#endregion
+export { Loading };