loading-dev 0.3.5 → 0.3.6

package/dist/clock.js

@@ -1,9 +1,31 @@
-import {
-  Clock
-} from "./chunk-2TYML5J2.js";
-import "./chunk-A2PZBHTA.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Clock
-};
+import { rotationCss, spinClass } from "./easing.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/clock.tsx
+const css = `
+${rotationCss("clock")}
+`;
+function Clock({ easing, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "clock",
+		children: css
+	}), /* @__PURE__ */ jsxs("svg", {
+		...spinnerRoot("clock", rest),
+		fill: "none",
+		role: "presentation",
+		viewBox: "0 0 16 16",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			fill: "currentColor",
+			opacity: "0.1",
+			r: "8"
+		}), /* @__PURE__ */ jsx("path", {
+			className: spinClass("clock", easing),
+			d: "M11.1937 2.92061C10.5206 2.49739 9.77304 2.21397 8.9954 2.08314C8.45076 1.99151 8 2.44772 8 3V7.20324C8 7.49211 8.12492 7.76686 8.34259 7.95677L11.8999 11.0603C12.3287 11.4344 12.9913 11.378 13.2643 10.8787C13.6356 10.1998 13.8736 9.45248 13.9617 8.67713C14.0892 7.55433 13.8971 6.41834 13.4074 5.39993C12.9177 4.38152 12.1503 3.5221 11.1937 2.92061Z",
+			fill: "currentColor"
+		})]
+	})] });
+}
+//#endregion
+export { Clock };

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

package/dist/comet.js

@@ -1,9 +1,52 @@
-import {
-  Comet
-} from "./chunk-UXTZTFNZ.js";
-import "./chunk-A2PZBHTA.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Comet
-};
+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/comet.tsx
+const css = `
+.ld-comet {
+  --ld-comet-stroke: calc(${SIZE} * 0.12);
+  position: relative;
+}
+
+.ld-comet-spin {
+  position: absolute;
+  inset: 0;
+}
+
+.ld-comet-tail {
+  position: absolute;
+  inset: 0;
+  border-radius: 9999px;
+  background: conic-gradient(from 0deg, transparent, currentColor);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-comet-stroke)), #000 0);
+  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-comet-stroke)), #000 0);
+}
+
+.ld-comet-head {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: var(--ld-comet-stroke);
+  height: var(--ld-comet-stroke);
+  background: currentColor;
+  border-radius: 9999px;
+  transform: translateX(-50%);
+}
+
+${rotationCss("comet")}
+`;
+function Comet({ easing, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "comet",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("comet", rest),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: spinClass("comet", easing),
+			children: [/* @__PURE__ */ jsx("div", { className: "ld-comet-tail" }), /* @__PURE__ */ jsx("div", { className: "ld-comet-head" })]
+		})
+	})] });
+}
+//#endregion
+export { Comet };

package/dist/compass.d.ts

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

package/dist/compass.js

@@ -1,8 +1,39 @@
-import {
-  Compass
-} from "./chunk-JQNF5GYA.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Compass
-};
+import { animation } from "./motion.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/compass.tsx
+const css = `
+.ld-compass-ticks {
+  transform-origin: center;
+  ${animation("compass", "ld-compass-turn", "ease-in-out")}
+}
+
+@keyframes ld-compass-turn {
+  to {
+    transform: rotate(90deg);
+  }
+}
+`;
+function Compass(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "compass",
+		children: css
+	}), /* @__PURE__ */ jsx("svg", {
+		...spinnerRoot("compass", props),
+		fill: "none",
+		role: "presentation",
+		viewBox: "0 0 16 16",
+		children: /* @__PURE__ */ jsxs("g", {
+			className: "ld-compass-ticks",
+			fill: "currentColor",
+			children: [
+				/* @__PURE__ */ jsx("path", { d: "M7.33334 0.666667C7.33334 0.298477 7.63181 0 8 0C8.36819 0 8.66667 0.298477 8.66667 0.666667V3.33333C8.66667 3.70152 8.36819 4 8 4C7.63181 4 7.33334 3.70152 7.33334 3.33333V0.666667Z" }),
+				/* @__PURE__ */ jsx("path", { d: "M12.6667 8.66667C12.2985 8.66667 12 8.3682 12 8.00001C12 7.63182 12.2985 7.33334 12.6667 7.33334H15.3333C15.7015 7.33334 16 7.63182 16 8.00001C16 8.3682 15.7015 8.66667 15.3333 8.66667H12.6667Z" }),
+				/* @__PURE__ */ jsx("path", { d: "M7.33333 12.6667C7.33333 12.2985 7.63181 12 8 12C8.36819 12 8.66667 12.2985 8.66667 12.6667V15.3333C8.66667 15.7015 8.36819 16 8 16C7.63181 16 7.33333 15.7015 7.33333 15.3333V12.6667Z" }),
+				/* @__PURE__ */ jsx("path", { d: "M0.666667 8.66667C0.298477 8.66667 1.60941e-08 8.3682 0 8.00001C-1.60941e-08 7.63182 0.298477 7.33334 0.666667 7.33334H3.33333C3.70152 7.33334 4 7.63182 4 8.00001C4 8.3682 3.70152 8.66667 3.33333 8.66667H0.666667Z" })
+			]
+		})
+	})] });
+}
+//#endregion
+export { Compass };

package/dist/dual.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 DualProps extends SpinnerProps, EasingProps, CapProps {
-}
-declare function Dual({ cap, easing, ...rest }: DualProps): react.JSX.Element;
-
-export { Dual, type DualProps };
+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/dual.d.ts
+export interface DualProps extends SpinnerProps, EasingProps, CapProps {}
+export declare function Dual({ cap, easing, ...rest }: DualProps): import("react").JSX.Element;
+//#endregion

package/dist/dual.js

@@ -1,10 +1,47 @@
-import {
-  Dual
-} from "./chunk-5UAEBEER.js";
-import "./chunk-A2PZBHTA.js";
-import "./chunk-JNR4T6LZ.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Dual
-};
+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/dual.tsx
+const css = `
+${rotationCss("dual")}
+
+.ld-dual-inner {
+  animation-direction: reverse;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-dual-inner {
+    transform: rotate(180deg);
+  }
+}
+`;
+function Dual({ cap, easing, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "dual",
+		children: css
+	}), /* @__PURE__ */ jsxs("svg", {
+		...spinnerRoot("dual", rest),
+		fill: "none",
+		role: "presentation",
+		stroke: "currentColor",
+		strokeLinecap: linecap(cap),
+		strokeWidth: "2.5",
+		viewBox: "0 0 24 24",
+		children: [/* @__PURE__ */ jsx("circle", {
+			className: spinClass("dual", easing),
+			cx: "12",
+			cy: "12",
+			r: "10",
+			strokeDasharray: "18 44.8"
+		}), /* @__PURE__ */ jsx("circle", {
+			className: `ld-dual-inner ${spinClass("dual", easing)}`,
+			cx: "12",
+			cy: "12",
+			r: "5.5",
+			strokeDasharray: "10 24.6"
+		})]
+	})] });
+}
+//#endregion
+export { Dual };

package/dist/easing-DhnLArHS.d.ts

@@ -0,0 +1,11 @@
+import { l as SpinnerName } from "./motion-D_zUuA3S.js";
+//#region src/easing.d.ts
+type Easing = "linear" | "ease-in-out" | "stacked";
+declare const DEFAULT_EASING: Easing;
+interface EasingProps {
+  easing?: Easing;
+}
+declare function spinClass(name: SpinnerName, easing?: Easing): string;
+declare function rotationCss(name: SpinnerName, turn?: string): string;
+//#endregion
+export { spinClass as a, rotationCss as i, Easing as n, EasingProps as r, DEFAULT_EASING as t };

package/dist/easing.d.ts

@@ -1,11 +1,2 @@
-import { SpinnerName } from './motion.js';
-
-type Easing = "linear" | "ease-in-out" | "stacked";
-declare const DEFAULT_EASING: Easing;
-interface EasingProps {
-    easing?: Easing;
-}
-declare function spinClass(name: SpinnerName, easing?: Easing): string;
-declare function rotationCss(name: SpinnerName, turn?: string): string;
-
-export { DEFAULT_EASING, type Easing, type EasingProps, rotationCss, spinClass };
+import { a as spinClass, i as rotationCss, n as Easing, r as EasingProps, t as DEFAULT_EASING } from "./easing-DhnLArHS.js";
+export { DEFAULT_EASING, Easing, EasingProps, rotationCss, spinClass };

package/dist/easing.js

@@ -1,11 +1,34 @@
-import {
-  DEFAULT_EASING,
-  rotationCss,
-  spinClass
-} from "./chunk-A2PZBHTA.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  DEFAULT_EASING,
-  rotationCss,
-  spinClass
-};
+import { animation } from "./motion.js";
+//#region src/easing.ts
+const DEFAULT_EASING = "linear";
+function spinClass(name, easing = DEFAULT_EASING) {
+	const base = `ld-${name}-spin`;
+	return easing === "linear" ? base : `${base} ${base}-${easing}`;
+}
+const ROTATE = `to {
+    transform: rotate(360deg);
+  }`;
+function rotationCss(name, turn = ROTATE) {
+	return `
+.ld-${name}-spin {
+  transform-origin: center;
+  ${animation(name, `ld-${name}-rotate`, "linear")}
+}
+
+.ld-${name}-spin-ease-in-out {
+  animation-timing-function: ease-in-out;
+}
+
+.ld-${name}-spin-stacked {
+  animation-name: ld-${name}-rotate, ld-${name}-rotate;
+  animation-timing-function: linear, ease-in-out;
+  animation-composition: add;
+}
+
+@keyframes ld-${name}-rotate {
+  ${turn}
+}
+`;
+}
+//#endregion
+export { DEFAULT_EASING, rotationCss, spinClass };

package/dist/eclipse.d.ts

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

package/dist/eclipse.js

@@ -1,8 +1,69 @@
-import {
-  Eclipse
-} from "./chunk-2LMGBBRJ.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Eclipse
-};
+import { STEP_VAR, animation, stagger } from "./motion.js";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/eclipse.tsx
+const DOTS = [0, 1];
+const css = `
+.ld-eclipse {
+  position: relative;
+}
+
+.ld-eclipse-dot {
+  position: absolute;
+  top: 30%;
+  left: 30%;
+  width: 40%;
+  height: 40%;
+  background: currentColor;
+  border-radius: 50%;
+  ${animation("eclipse", ["ld-eclipse-slide", "ld-eclipse-depth"], "ease-in-out")}
+  animation-delay: ${stagger("eclipse", DOTS.length)};
+}
+
+@keyframes ld-eclipse-slide {
+  0%,
+  100% {
+    translate: 75% 0;
+  }
+  50% {
+    translate: -75% 0;
+  }
+}
+
+@keyframes ld-eclipse-depth {
+  0%,
+  50%,
+  100% {
+    opacity: 0.75;
+    scale: 1;
+  }
+  25% {
+    opacity: 1;
+    scale: 1.3;
+  }
+  75% {
+    opacity: 0.5;
+    scale: 0.7;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-eclipse-dot {
+    translate: calc(var(${STEP_VAR}) * 150% - 75%) 0;
+  }
+}
+`;
+function Eclipse(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "eclipse",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("eclipse", props),
+		children: DOTS.map((index) => /* @__PURE__ */ jsx("div", {
+			className: "ld-eclipse-dot",
+			style: step(index)
+		}, index))
+	})] });
+}
+//#endregion
+export { Eclipse };

package/dist/fade.d.ts

@@ -1,8 +1,7 @@
-import { SpinnerName } from './motion.js';
-
-declare function fadeCss(name: SpinnerName, element: string, count: number, { dim, rest }: {
-    dim: number;
-    rest: number;
+import { l as SpinnerName } from "./motion-D_zUuA3S.js";
+//#region src/fade.d.ts
+export declare function fadeCss(name: SpinnerName, element: string, count: number, { dim, rest }: {
+  dim: number;
+  rest: number;
 }): string;
-
-export { fadeCss };
+//#endregion

package/dist/fade.js

@@ -1,7 +1,27 @@
-import {
-  fadeCss
-} from "./chunk-PVVWLDIS.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  fadeCss
-};
+import { animation, stagger } from "./motion.js";
+//#region src/fade.ts
+function fadeCss(name, element, count, { dim, rest }) {
+	return `
+.ld-${name}-${element} {
+  ${animation(name, `ld-${name}-fade`, "linear")}
+  animation-delay: ${stagger(name, count)};
+}
+
+@keyframes ld-${name}-fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: ${dim};
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-${name}-${element} {
+    opacity: ${rest};
+  }
+}
+`;
+}
+//#endregion
+export { fadeCss };

package/dist/flip.d.ts

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

package/dist/flip.js

@@ -1,8 +1,41 @@
-import {
-  Flip
-} from "./chunk-YIB63EKJ.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Flip
-};
+import { SIZE, animation } from "./motion.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/flip.tsx
+const css = `
+.ld-flip {
+  perspective: calc(${SIZE} * 3);
+}
+
+.ld-flip-face {
+  width: 64%;
+  height: 64%;
+  margin: 18%;
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.06);
+  ${animation("flip", "ld-flip-turn", "ease-in-out")}
+}
+
+@keyframes ld-flip-turn {
+  0% {
+    transform: rotateX(0) rotateY(0);
+  }
+  50% {
+    transform: rotateX(-180deg) rotateY(0);
+  }
+  100% {
+    transform: rotateX(-180deg) rotateY(-180deg);
+  }
+}
+`;
+function Flip(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "flip",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("flip", props),
+		children: /* @__PURE__ */ jsx("div", { className: "ld-flip-face" })
+	})] });
+}
+//#endregion
+export { Flip };

package/dist/frame.d.ts

@@ -1,18 +1,16 @@
-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;
+import { l as SpinnerName } from "./motion-D_zUuA3S.js";
+import { t as SpinnerProps } from "./types-BYaenrWm.js";
+import { CSSProperties } from "react";
+//#region src/frame.d.ts
+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;
 };
-
-export { SpinnerStyle, cssVars, spinnerRoot, step };
+//#endregion

package/dist/frame.js

@@ -1,13 +1,42 @@
-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";
+//#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