loading-dev 0.3.4 → 0.3.6

package/dist/slide.js

@@ -1,8 +1,74 @@
-import {
-  Slide
-} from "./chunk-IRMB7CHZ.js";
-import "./chunk-VRX5ZYC6.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";
+//#region 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))
+	})] });
+}
+//#endregion
+export { Slide };

package/dist/snake.d.ts

@@ -1,11 +1,7 @@
-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-Ba3uZx03.js";
+import { r as EasingProps } from "./easing-DhnLArHS.js";
+import { t as SpinnerProps } from "./types-BYaenrWm.js";
+//#region src/snake.d.ts
+export interface SnakeProps extends SpinnerProps, EasingProps, CapProps {}
+export declare function Snake({ cap, easing, ...rest }: SnakeProps): import("react").JSX.Element;
+//#endregion

package/dist/snake.js

@@ -1,10 +1,59 @@
-import {
-  Snake
-} from "./chunk-RTKHVDCD.js";
-import "./chunk-7C6Q6WUN.js";
-import "./chunk-JNR4T6LZ.js";
-import "./chunk-VRX5ZYC6.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";
+//#region 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"
+			})
+		})
+	})] });
+}
+//#endregion
+export { Snake };

package/dist/spinners.d.ts

@@ -1,68 +1,62 @@
-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;
+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 { 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 { 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";
+//#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;
+  "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 };
+//#endregion

package/dist/spinners.js

@@ -1,39 +1,63 @@
-import {
-  SPINNERS
-} from "./chunk-5DS5PSRD.js";
-import "./chunk-BMJ3AGRK.js";
-import "./chunk-HDBQBCTN.js";
-import "./chunk-VBI53UGV.js";
-import "./chunk-Y7QGIWTL.js";
-import "./chunk-FKUMWHUL.js";
-import "./chunk-5LSP7MQQ.js";
-import "./chunk-ZLJYYX76.js";
-import "./chunk-IWVH2GKE.js";
-import "./chunk-IRMB7CHZ.js";
-import "./chunk-RTKHVDCD.js";
-import "./chunk-TFHDE6YZ.js";
-import "./chunk-LIPOYJAI.js";
-import "./chunk-K5XVX5GB.js";
-import "./chunk-MVL7SVAH.js";
-import "./chunk-AY4VLQBZ.js";
-import "./chunk-IZ4TRHOC.js";
-import "./chunk-IQ2WQZFY.js";
-import "./chunk-5A6DX4J6.js";
-import "./chunk-T7OV7MUW.js";
-import "./chunk-NHN4FV63.js";
-import "./chunk-AHW6IXXT.js";
-import "./chunk-5R75HMWP.js";
-import "./chunk-X7BJQCYL.js";
-import "./chunk-5DLURQGF.js";
-import "./chunk-7C6Q6WUN.js";
-import "./chunk-PBB2PRPT.js";
-import "./chunk-UWSCBISJ.js";
-import "./chunk-I5CFO2M5.js";
-import "./chunk-JNR4T6LZ.js";
-import "./chunk-A43AJR54.js";
-import "./chunk-T5EUYN7R.js";
-import "./chunk-VRX5ZYC6.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 { 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 { 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";
+//#region src/spinners.ts
+const SPINNERS = {
+	arc: Arc,
+	atom: Atom,
+	blocks: Blocks,
+	"bouncing-dots": BouncingDots,
+	cascade: Cascade,
+	"circular-dots": CircularDots,
+	classic: Classic,
+	"classic-v2": ClassicV2,
+	clock: Clock,
+	comet: Comet,
+	compass: Compass,
+	dual: Dual,
+	eclipse: Eclipse,
+	flip: Flip,
+	gather: Gather,
+	leap: Leap,
+	"linear-dots": LinearDots,
+	loading: Loading,
+	morph: Morph,
+	orbit: Orbit,
+	pulse: Pulse,
+	radar: Radar,
+	ring: Ring,
+	ripple: Ripple,
+	slide: Slide,
+	snake: Snake,
+	swirl: Swirl,
+	trace: Trace,
+	wave: Wave
 };
+//#endregion
+export { SPINNERS };

package/dist/swirl.d.ts

@@ -1,6 +1,4 @@
-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-BYaenrWm.js";
+//#region src/swirl.d.ts
+export declare function Swirl(props: SpinnerProps): import("react").JSX.Element;
+//#endregion

package/dist/swirl.js

@@ -1,8 +1,50 @@
-import {
-  Swirl
-} from "./chunk-BMJ3AGRK.js";
-import "./chunk-VRX5ZYC6.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";
+//#region 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))
+	})] });
+}
+//#endregion
+export { Swirl };

package/dist/trace.d.ts

@@ -1,11 +1,7 @@
-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-Ba3uZx03.js";
+import { r as EasingProps } from "./easing-DhnLArHS.js";
+import { t as SpinnerProps } from "./types-BYaenrWm.js";
+//#region src/trace.d.ts
+export interface TraceProps extends SpinnerProps, EasingProps, CapProps {}
+export declare function Trace({ cap, easing, ...rest }: TraceProps): import("react").JSX.Element;
+//#endregion

package/dist/trace.js

@@ -1,10 +1,46 @@
-import {
-  Trace
-} from "./chunk-HDBQBCTN.js";
-import "./chunk-7C6Q6WUN.js";
-import "./chunk-JNR4T6LZ.js";
-import "./chunk-VRX5ZYC6.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";
+//#region 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)
+		})]
+	})] });
+}
+//#endregion
+export { Trace };

package/dist/types-BYaenrWm.d.ts

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

package/dist/types.d.ts

@@ -1,23 +1,2 @@
-interface SpinnerProps {
-    /** Extra class names merged onto the root element. */
-    className?: string;
-    /**
-     * Any CSS color — `#f97316`, `oklch(70% 0.19 45)`, `rgb(249 115 22 / 60%)`,
-     * `var(--brand)`. Omit to keep inheriting the surrounding text color.
-     */
-    color?: string;
-    /**
-     * Length of one animation cycle in milliseconds. Omit to inherit
-     * `--ld-duration` from an ancestor, then the spinner's own default.
-     */
-    duration?: number;
-    /**
-     * Whether the animation runs. Omit to inherit `--ld-play-state` from an
-     * ancestor, which defaults to running.
-     */
-    playState?: "paused" | "running";
-    /** Width and height of the spinner in pixels. Defaults to 20. */
-    size?: number;
-}
-
-export type { SpinnerProps };
+import { t as SpinnerProps } from "./types-BYaenrWm.js";
+export { SpinnerProps };

package/dist/types.js

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

package/dist/wave.d.ts

@@ -1,11 +1,9 @@
-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-BYaenrWm.js";
+//#region src/wave.d.ts
+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;
+//#endregion