loading-dev 0.3.5 → 0.3.7

package/dist/frame.d.ts

@@ -1,18 +1,14 @@
-import * as react from 'react';
-import { CSSProperties } from 'react';
-import { SpinnerName } from './motion.js';
-import { SpinnerProps } from './types.js';
-
-declare function SpinnerStyle({ children, name, }: {
-    children: string;
-    name: SpinnerName;
-}): react.JSX.Element;
-declare function cssVars(vars: CSSProperties & Record<`--ld-${string}`, number | string>): CSSProperties;
-declare function step(index: number): CSSProperties;
-declare function spinnerRoot(name: SpinnerName, { className, color, duration, playState, size }: SpinnerProps): {
-    "aria-hidden": boolean;
-    className: string;
-    style: CSSProperties;
-};
-
-export { SpinnerStyle, cssVars, spinnerRoot, step };
+import { l as SpinnerName } from "./motion-trIEyOxA.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+import { CSSProperties } from "react";
+export declare function SpinnerStyle({ children, name }: {
+  children: string;
+  name: SpinnerName;
+}): import("react").JSX.Element;
+export declare function cssVars(vars: CSSProperties & Record<`--ld-${string}`, number | string>): CSSProperties;
+export declare function step(index: number): CSSProperties;
+export declare function spinnerRoot(name: SpinnerName, { className, color, duration, playState, size }: SpinnerProps): {
+  "aria-hidden": boolean;
+  className: string;
+  style: CSSProperties;
+};

package/dist/frame.js

@@ -1,13 +1,41 @@
-import {
-  SpinnerStyle,
-  cssVars,
-  spinnerRoot,
-  step
-} from "./chunk-UAO52LUL.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";
+// 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 }
+		})
+	};
+}
+export { SpinnerStyle, cssVars, spinnerRoot, step };

package/dist/gather.d.ts

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

package/dist/gather.js

@@ -1,8 +1,84 @@
-import {
-  Gather
-} from "./chunk-JKLL7YYG.js";
-import "./chunk-UAO52LUL.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";
+// 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}`))
+		})
+	})] });
+}
+export { Gather };

package/dist/index.d.ts

@@ -1,35 +1,42 @@
-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-B_Mo1a7N.js";
+import { i as PLAY_STATE_VAR, l as SpinnerName, n as DURATION_VAR, s as SPINNER_MOTION } from "./motion-trIEyOxA.js";
+import { n as Easing, r as EasingProps, t as DEFAULT_EASING } from "./easing-BM_1QWrA.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.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 { Chevrons } from "./chevrons.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 { 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, LoopProps } from "./loop.js";
+import { Morph } from "./morph.js";
+import { Orbit, OrbitProps } from "./orbit.js";
+import { Phases } from "./phases.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 { Scan } from "./scan.js";
+import { Slide } from "./slide.js";
+import { Snake, SnakeProps } from "./snake.js";
+import { Split } from "./split.js";
+import { Steps } from "./steps.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, Chevrons, 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, Fill, Flip, Gather, Leap, LinearDots, Loading, Loop, type LoopProps, Morph, Orbit, type OrbitProps, PLAY_STATE_VAR, Phases, Pulse, Radar, type RadarProps, Ring, type RingProps, Ripple, type RippleDirection, type RippleProps, SPINNERS, SPINNER_MOTION, Scan, Slide, Snake, type SnakeProps, type SpinnerName, type SpinnerProps, Split, Steps, Swirl, Trace, type TraceProps, Wave, type WaveOrigin, type WaveProps };

package/dist/index.js

@@ -1,146 +1,41 @@
-import {
-  SPINNERS
-} from "./chunk-HL7TIIDB.js";
-import {
-  Swirl
-} from "./chunk-SUUR5WMA.js";
-import {
-  Trace
-} from "./chunk-KAZ5BTXC.js";
-import {
-  DEFAULT_WAVE_ORIGIN,
-  Wave
-} from "./chunk-DKYEZLIN.js";
-import {
-  Orbit
-} from "./chunk-LDXBT62V.js";
-import {
-  Pulse
-} from "./chunk-PM6DU637.js";
-import {
-  Radar
-} from "./chunk-2OX27TAE.js";
-import {
-  Ring
-} from "./chunk-L2DUMHO4.js";
-import {
-  DEFAULT_RIPPLE_DIRECTION,
-  Ripple
-} from "./chunk-FQ2U2M7F.js";
-import {
-  Slide
-} from "./chunk-BCIAMPLU.js";
-import {
-  Snake
-} from "./chunk-UOXB5QOZ.js";
-import {
-  Flip
-} from "./chunk-YIB63EKJ.js";
-import {
-  Gather
-} from "./chunk-JKLL7YYG.js";
-import {
-  Leap
-} from "./chunk-4O4ADYWE.js";
-import {
-  LinearDots
-} from "./chunk-FWH6VWVK.js";
-import {
-  Loading
-} from "./chunk-RAHAQ7XK.js";
-import {
-  Morph
-} from "./chunk-P4BSSDSY.js";
-import {
-  Classic
-} from "./chunk-IJJULNRU.js";
-import {
-  Clock
-} from "./chunk-2TYML5J2.js";
-import {
-  Comet
-} from "./chunk-UXTZTFNZ.js";
-import {
-  Compass
-} from "./chunk-JQNF5GYA.js";
-import {
-  Dual
-} from "./chunk-5UAEBEER.js";
-import {
-  Eclipse
-} from "./chunk-2LMGBBRJ.js";
-import {
-  Arc
-} from "./chunk-MAKBZTL3.js";
-import {
-  Atom
-} from "./chunk-BAVSTTWG.js";
-import {
-  DEFAULT_EASING
-} from "./chunk-A2PZBHTA.js";
-import {
-  Blocks,
-  DEFAULT_BLOCKS_SWEEP
-} from "./chunk-VZX7APSS.js";
-import {
-  BouncingDots
-} from "./chunk-ULWRXY3A.js";
-import {
-  Cascade
-} from "./chunk-KOYM24WV.js";
-import {
-  DEFAULT_CAP
-} from "./chunk-JNR4T6LZ.js";
-import {
-  CircularDots
-} from "./chunk-3WMZVDPS.js";
-import {
-  ClassicV2
-} from "./chunk-R5ZDKN3Z.js";
-import "./chunk-PVVWLDIS.js";
-import "./chunk-UAO52LUL.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 { 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 { DEFAULT_RIPPLE_DIRECTION, 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 { DEFAULT_WAVE_ORIGIN, Wave } from "./wave.js";
+import { SPINNERS } from "./spinners.js";
+export { Arc, Atom, Blocks, BouncingDots, Cascade, Chevrons, CircularDots, Classic, ClassicV2, Clock, Comet, Compass, DEFAULT_BLOCKS_SWEEP, DEFAULT_CAP, DEFAULT_EASING, DEFAULT_RIPPLE_DIRECTION, DEFAULT_WAVE_ORIGIN, DURATION_VAR, Dual, Eclipse, Fill, Flip, Gather, Leap, LinearDots, Loading, Loop, Morph, Orbit, PLAY_STATE_VAR, Phases, Pulse, Radar, Ring, Ripple, SPINNERS, SPINNER_MOTION, Scan, Slide, Snake, Split, Steps, Swirl, Trace, Wave };

package/dist/leap.d.ts

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

package/dist/leap.js

@@ -1,8 +1,66 @@
-import {
-  Leap
-} from "./chunk-4O4ADYWE.js";
-import "./chunk-UAO52LUL.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";
+// 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)))] });
+}
+export { Leap };

package/dist/linear-dots.d.ts

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

package/dist/linear-dots.js

@@ -1,8 +1,53 @@
-import {
-  LinearDots
-} from "./chunk-FWH6VWVK.js";
-import "./chunk-UAO52LUL.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";
+// 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))
+	})] });
+}
+export { LinearDots };

package/dist/loading.d.ts

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