loading-dev 0.3.4 → 0.3.6

package/dist/morph.d.ts

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

package/dist/morph.js

@@ -1,8 +1,40 @@
-import {
-  Morph
-} from "./chunk-AY4VLQBZ.js";
-import "./chunk-VRX5ZYC6.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Morph
-};
+import { SIZE, animation } from "./motion.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/morph.tsx
+const css = `
+.ld-morph-shape {
+  width: 64%;
+  height: 64%;
+  margin: 18%;
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.08);
+  ${animation("morph", "ld-morph-round", "ease-in-out")}
+}
+
+@keyframes ld-morph-round {
+  0% {
+    border-radius: calc(${SIZE} * 0.08);
+    transform: rotate(0);
+  }
+  50% {
+    border-radius: 50%;
+    transform: rotate(45deg);
+  }
+  100% {
+    border-radius: calc(${SIZE} * 0.08);
+    transform: rotate(90deg);
+  }
+}
+`;
+function Morph(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "morph",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("morph", props),
+		children: /* @__PURE__ */ jsx("div", { className: "ld-morph-shape" })
+	})] });
+}
+//#endregion
+export { Morph };

package/dist/motion-D_zUuA3S.d.ts

@@ -0,0 +1,45 @@
+//#region src/motion.d.ts
+declare const DURATION_VAR = "--ld-duration";
+declare const PLAY_STATE_VAR = "--ld-play-state";
+declare const SIZE_VAR = "--ld-size";
+declare const STEP_VAR = "--ld-step";
+declare const DEFAULT_SIZE = 20;
+declare const SIZE = "var(--ld-size, 20px)";
+declare const SPINNER_MOTION: {
+  readonly arc: 800;
+  readonly atom: 1000;
+  readonly blocks: 1300;
+  readonly "bouncing-dots": 500;
+  readonly cascade: 1500;
+  readonly "circular-dots": 800;
+  readonly classic: 1200;
+  readonly "classic-v2": 800;
+  readonly clock: 1200;
+  readonly comet: 700;
+  readonly compass: 500;
+  readonly dual: 1000;
+  readonly eclipse: 1200;
+  readonly flip: 1200;
+  readonly gather: 1600;
+  readonly leap: 1800;
+  readonly "linear-dots": 900;
+  readonly loading: 1000;
+  readonly morph: 1200;
+  readonly orbit: 750;
+  readonly pulse: 1200;
+  readonly radar: 1500;
+  readonly ring: 800;
+  readonly ripple: 1200;
+  readonly slide: 2400;
+  readonly snake: 1400;
+  readonly swirl: 1200;
+  readonly trace: 1200;
+  readonly wave: 900;
+};
+type SpinnerName = keyof typeof SPINNER_MOTION;
+declare function duration(name: SpinnerName): string;
+declare function stagger(name: SpinnerName, count: number): string;
+declare const PLAY_STATE = "var(--ld-play-state, running)";
+declare function animation(name: SpinnerName, keyframes: string | string[], timing: string): string;
+//#endregion
+export { SIZE as a, STEP_VAR as c, duration as d, stagger as f, PLAY_STATE_VAR as i, SpinnerName as l, DURATION_VAR as n, SIZE_VAR as o, PLAY_STATE as r, SPINNER_MOTION as s, DEFAULT_SIZE as t, animation as u };

package/dist/motion.d.ts

@@ -1,44 +1,2 @@
-declare const DURATION_VAR = "--ld-duration";
-declare const PLAY_STATE_VAR = "--ld-play-state";
-declare const SIZE_VAR = "--ld-size";
-declare const STEP_VAR = "--ld-step";
-declare const DEFAULT_SIZE = 20;
-declare const SIZE = "var(--ld-size, 20px)";
-declare const SPINNER_MOTION: {
-    readonly arc: 800;
-    readonly atom: 1000;
-    readonly blocks: 1300;
-    readonly "bouncing-dots": 500;
-    readonly cascade: 1500;
-    readonly "circular-dots": 800;
-    readonly classic: 1200;
-    readonly "classic-v2": 800;
-    readonly clock: 1200;
-    readonly comet: 700;
-    readonly compass: 500;
-    readonly dual: 1000;
-    readonly eclipse: 1200;
-    readonly flip: 1200;
-    readonly gather: 1600;
-    readonly leap: 1800;
-    readonly "linear-dots": 900;
-    readonly loading: 1000;
-    readonly morph: 1200;
-    readonly orbit: 750;
-    readonly pulse: 1200;
-    readonly radar: 1500;
-    readonly ring: 800;
-    readonly ripple: 1200;
-    readonly slide: 2400;
-    readonly snake: 1400;
-    readonly swirl: 1200;
-    readonly trace: 1200;
-    readonly wave: 900;
-};
-type SpinnerName = keyof typeof SPINNER_MOTION;
-declare function duration(name: SpinnerName): string;
-declare function stagger(name: SpinnerName, count: number): string;
-declare const PLAY_STATE = "var(--ld-play-state, running)";
-declare function animation(name: SpinnerName, keyframes: string | string[], timing: string): string;
-
-export { DEFAULT_SIZE, DURATION_VAR, PLAY_STATE, PLAY_STATE_VAR, SIZE, SIZE_VAR, SPINNER_MOTION, STEP_VAR, type SpinnerName, animation, duration, stagger };
+import { a as SIZE, c as STEP_VAR, d as duration, f as stagger, i as PLAY_STATE_VAR, l as SpinnerName, n as DURATION_VAR, o as SIZE_VAR, r as PLAY_STATE, s as SPINNER_MOTION, t as DEFAULT_SIZE, u as animation } from "./motion-D_zUuA3S.js";
+export { DEFAULT_SIZE, DURATION_VAR, PLAY_STATE, PLAY_STATE_VAR, SIZE, SIZE_VAR, SPINNER_MOTION, STEP_VAR, SpinnerName, animation, duration, stagger };

package/dist/motion.js

@@ -1,26 +1,51 @@
-import {
-  DEFAULT_SIZE,
-  DURATION_VAR,
-  PLAY_STATE,
-  PLAY_STATE_VAR,
-  SIZE,
-  SIZE_VAR,
-  SPINNER_MOTION,
-  STEP_VAR,
-  animation,
-  duration,
-  stagger
-} from "./chunk-OMNMMKI7.js";
-export {
-  DEFAULT_SIZE,
-  DURATION_VAR,
-  PLAY_STATE,
-  PLAY_STATE_VAR,
-  SIZE,
-  SIZE_VAR,
-  SPINNER_MOTION,
-  STEP_VAR,
-  animation,
-  duration,
-  stagger
+//#region src/motion.ts
+const DURATION_VAR = "--ld-duration";
+const PLAY_STATE_VAR = "--ld-play-state";
+const SIZE_VAR = "--ld-size";
+const STEP_VAR = "--ld-step";
+const DEFAULT_SIZE = 20;
+const SIZE = `var(${SIZE_VAR}, 20px)`;
+const SPINNER_MOTION = {
+	arc: 800,
+	atom: 1e3,
+	blocks: 1300,
+	"bouncing-dots": 500,
+	cascade: 1500,
+	"circular-dots": 800,
+	classic: 1200,
+	"classic-v2": 800,
+	clock: 1200,
+	comet: 700,
+	compass: 500,
+	dual: 1e3,
+	eclipse: 1200,
+	flip: 1200,
+	gather: 1600,
+	leap: 1800,
+	"linear-dots": 900,
+	loading: 1e3,
+	morph: 1200,
+	orbit: 750,
+	pulse: 1200,
+	radar: 1500,
+	ring: 800,
+	ripple: 1200,
+	slide: 2400,
+	snake: 1400,
+	swirl: 1200,
+	trace: 1200,
+	wave: 900
 };
+function duration(name) {
+	return `var(${DURATION_VAR}, ${SPINNER_MOTION[name]}ms)`;
+}
+function stagger(name, count) {
+	return `calc(${duration(name)} * (var(${STEP_VAR}) - ${count}) / ${count})`;
+}
+const PLAY_STATE = `var(${PLAY_STATE_VAR}, running)`;
+function animation(name, keyframes, timing) {
+	return `animation: ${[keyframes].flat().map((frames) => `${frames} ${duration(name)} ${timing} infinite`).join(", ")};
+  animation-play-state: ${PLAY_STATE};`;
+}
+//#endregion
+export { DEFAULT_SIZE, DURATION_VAR, PLAY_STATE, PLAY_STATE_VAR, SIZE, SIZE_VAR, SPINNER_MOTION, STEP_VAR, animation, duration, stagger };

package/dist/orbit.d.ts

@@ -1,10 +1,6 @@
-import * as react from 'react';
-import { EasingProps } from './easing.js';
-import { SpinnerProps } from './types.js';
-import './motion.js';
-
-interface OrbitProps extends SpinnerProps, EasingProps {
-}
-declare function Orbit({ easing, ...rest }: OrbitProps): react.JSX.Element;
-
-export { Orbit, type OrbitProps };
+import { r as EasingProps } from "./easing-DhnLArHS.js";
+import { t as SpinnerProps } from "./types-BYaenrWm.js";
+//#region src/orbit.d.ts
+export interface OrbitProps extends SpinnerProps, EasingProps {}
+export declare function Orbit({ easing, ...rest }: OrbitProps): import("react").JSX.Element;
+//#endregion

package/dist/orbit.js

@@ -1,9 +1,44 @@
-import {
-  Orbit
-} from "./chunk-Y7QGIWTL.js";
-import "./chunk-7C6Q6WUN.js";
-import "./chunk-VRX5ZYC6.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Orbit
-};
+import { SIZE } 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/orbit.tsx
+const css = `
+.ld-orbit {
+  --ld-orbit-stroke: calc(${SIZE} * 0.0625);
+  position: relative;
+}
+
+.ld-orbit-track {
+  position: absolute;
+  inset: 8%;
+  border-radius: 9999px;
+  background: conic-gradient(from 180deg, transparent 0deg, currentColor 180deg, transparent 180deg);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-orbit-stroke)), #000 0);
+  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-orbit-stroke)), #000 0);
+}
+
+.ld-orbit-dot {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 25%;
+  height: 25%;
+  background: currentColor;
+  border-radius: 9999px;
+  transform: translate(-50%, -50%);
+}
+
+${rotationCss("orbit")}
+`;
+function Orbit({ easing, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "orbit",
+		children: css
+	}), /* @__PURE__ */ jsxs("div", {
+		...spinnerRoot("orbit", rest),
+		children: [/* @__PURE__ */ jsx("div", { className: "ld-orbit-dot" }), /* @__PURE__ */ jsx("div", { className: `ld-orbit-track ${spinClass("orbit", easing)}` })]
+	})] });
+}
+//#endregion
+export { Orbit };

package/dist/pulse.d.ts

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

package/dist/pulse.js

@@ -1,8 +1,52 @@
-import {
-  Pulse
-} from "./chunk-FKUMWHUL.js";
-import "./chunk-VRX5ZYC6.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Pulse
-};
+import { animation } from "./motion.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/pulse.tsx
+const css = `
+.ld-pulse-ring {
+  transform-origin: center;
+  ${animation("pulse", "ld-pulse-ripple", "ease-out")}
+}
+
+@keyframes ld-pulse-ripple {
+  from {
+    opacity: 0.4;
+    transform: scale(0.25);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-pulse-ring {
+    opacity: 0.2;
+  }
+}
+`;
+function Pulse(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "pulse",
+		children: css
+	}), /* @__PURE__ */ jsxs("svg", {
+		...spinnerRoot("pulse", props),
+		fill: "none",
+		role: "presentation",
+		viewBox: "0 0 16 16",
+		children: [/* @__PURE__ */ jsx("circle", {
+			className: "ld-pulse-ring",
+			cx: "8",
+			cy: "8",
+			fill: "currentColor",
+			r: "8"
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			fill: "currentColor",
+			r: "2"
+		})]
+	})] });
+}
+//#endregion
+export { Pulse };

package/dist/radar.d.ts

@@ -1,10 +1,6 @@
-import * as react from 'react';
-import { EasingProps } from './easing.js';
-import { SpinnerProps } from './types.js';
-import './motion.js';
-
-interface RadarProps extends SpinnerProps, EasingProps {
-}
-declare function Radar({ easing, ...rest }: RadarProps): react.JSX.Element;
-
-export { Radar, type RadarProps };
+import { r as EasingProps } from "./easing-DhnLArHS.js";
+import { t as SpinnerProps } from "./types-BYaenrWm.js";
+//#region src/radar.d.ts
+export interface RadarProps extends SpinnerProps, EasingProps {}
+export declare function Radar({ easing, ...rest }: RadarProps): import("react").JSX.Element;
+//#endregion

package/dist/radar.js

@@ -1,9 +1,64 @@
-import {
-  Radar
-} from "./chunk-5LSP7MQQ.js";
-import "./chunk-7C6Q6WUN.js";
-import "./chunk-VRX5ZYC6.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Radar
-};
+import { rotationCss, spinClass } from "./easing.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+//#region src/radar.tsx
+const css = `
+${rotationCss("radar")}
+`;
+function Radar({ easing, ...rest }) {
+	const beamGradient = useId();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "radar",
+		children: css
+	}), /* @__PURE__ */ jsxs("svg", {
+		...spinnerRoot("radar", rest),
+		fill: "none",
+		role: "presentation",
+		viewBox: "0 0 16 16",
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", {
+				cx: "8",
+				cy: "8",
+				gradientUnits: "userSpaceOnUse",
+				id: beamGradient,
+				r: "8",
+				children: [/* @__PURE__ */ jsx("stop", {
+					offset: "0.3334",
+					stopColor: "currentColor"
+				}), /* @__PURE__ */ jsx("stop", {
+					offset: "1",
+					stopColor: "currentColor",
+					stopOpacity: "0"
+				})]
+			}) }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "8",
+				fill: "currentColor",
+				opacity: "0.2",
+				r: "8"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "8",
+				opacity: "0.2",
+				r: "5.5",
+				stroke: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				className: spinClass("radar", easing),
+				d: "M8 0C9.50657 0 10.9824 0.425672 12.2578 1.22754C13.5333 2.02953 14.557 3.17533 15.21 4.5332C15.8629 5.89107 16.1193 7.40626 15.9492 8.90332C15.7791 10.4001 15.1896 11.8184 14.249 12.9951L10.4707 9.69922C10.8037 9.21598 11 8.63123 11 8C11 6.34315 9.65685 5 8 5V0Z",
+				fill: `url(#${beamGradient})`
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "8",
+				fill: "currentColor",
+				r: "2"
+			})
+		]
+	})] });
+}
+//#endregion
+export { Radar };

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

package/dist/ring.js

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

package/dist/ripple.d.ts

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

package/dist/ripple.js

@@ -1,10 +1,57 @@
-import {
-  DEFAULT_RIPPLE_DIRECTION,
-  Ripple
-} from "./chunk-IWVH2GKE.js";
-import "./chunk-VRX5ZYC6.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";
+//#region 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))
+	})] });
+}
+//#endregion
+export { DEFAULT_RIPPLE_DIRECTION, Ripple };

package/dist/slide.d.ts

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