loading-dev 0.3.5 → 0.3.7

package/dist/loading.js

@@ -1,9 +1,63 @@
-import {
-  Loading
-} from "./chunk-RAHAQ7XK.js";
-import "./chunk-PVVWLDIS.js";
-import "./chunk-UAO52LUL.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";
+// 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}`))
+	})] });
+}
+export { Loading };

package/dist/loop.d.ts

@@ -0,0 +1,5 @@
+import { n as CapProps } from "./cap-B_Mo1a7N.js";
+import { r as EasingProps } from "./easing-BM_1QWrA.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export interface LoopProps extends SpinnerProps, EasingProps, CapProps {}
+export declare function Loop({ cap, easing, ...rest }: LoopProps): import("react").JSX.Element;

package/dist/loop.js

@@ -0,0 +1,37 @@
+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";
+// src/loop.tsx
+const PATH = "M12 12c-2-2.7-3.6-4-5.5-4a4 4 0 0 0 0 8c1.9 0 3.5-1.3 5.5-4s3.6-4 5.5-4a4 4 0 0 1 0 8c-1.9 0-3.5-1.3-5.5-4z";
+const LENGTH = 100;
+const DASH = 30;
+const css = `
+${rotationCss("loop", `to {
+    stroke-dashoffset: -100;
+  }`)}
+`;
+function Loop({ cap, easing, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "loop",
+		children: css
+	}), /* @__PURE__ */ jsxs("svg", {
+		...spinnerRoot("loop", rest),
+		fill: "none",
+		role: "presentation",
+		stroke: "currentColor",
+		strokeWidth: "2.5",
+		viewBox: "0 0 24 24",
+		children: [/* @__PURE__ */ jsx("path", {
+			d: PATH,
+			opacity: "0.2"
+		}), /* @__PURE__ */ jsx("path", {
+			className: spinClass("loop", easing),
+			d: PATH,
+			pathLength: LENGTH,
+			strokeDasharray: `${DASH} 70`,
+			strokeLinecap: linecap(cap)
+		})]
+	})] });
+}
+export { Loop };

package/dist/morph.d.ts

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

package/dist/morph.js

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

package/dist/motion-trIEyOxA.d.ts

@@ -0,0 +1,50 @@
+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 chevrons: 1000;
+  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 fill: 1600;
+  readonly flip: 1200;
+  readonly gather: 1600;
+  readonly leap: 1800;
+  readonly "linear-dots": 900;
+  readonly loading: 1000;
+  readonly loop: 1600;
+  readonly morph: 1200;
+  readonly orbit: 750;
+  readonly phases: 3000;
+  readonly pulse: 1200;
+  readonly radar: 1500;
+  readonly ring: 800;
+  readonly ripple: 1200;
+  readonly scan: 1800;
+  readonly slide: 2400;
+  readonly snake: 1400;
+  readonly split: 1400;
+  readonly steps: 1600;
+  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 { 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-trIEyOxA.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,57 @@
-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
+// 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,
+	chevrons: 1e3,
+	"circular-dots": 800,
+	classic: 1200,
+	"classic-v2": 800,
+	clock: 1200,
+	comet: 700,
+	compass: 500,
+	dual: 1e3,
+	eclipse: 1200,
+	fill: 1600,
+	flip: 1200,
+	gather: 1600,
+	leap: 1800,
+	"linear-dots": 900,
+	loading: 1e3,
+	loop: 1600,
+	morph: 1200,
+	orbit: 750,
+	phases: 3e3,
+	pulse: 1200,
+	radar: 1500,
+	ring: 800,
+	ripple: 1200,
+	scan: 1800,
+	slide: 2400,
+	snake: 1400,
+	split: 1400,
+	steps: 1600,
+	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};`;
+}
+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,4 @@
-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-BM_1QWrA.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export interface OrbitProps extends SpinnerProps, EasingProps {}
+export declare function Orbit({ easing, ...rest }: OrbitProps): import("react").JSX.Element;

package/dist/orbit.js

@@ -1,9 +1,43 @@
-import {
-  Orbit
-} from "./chunk-LDXBT62V.js";
-import "./chunk-A2PZBHTA.js";
-import "./chunk-UAO52LUL.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";
+// 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)}` })]
+	})] });
+}
+export { Orbit };

package/dist/phases.d.ts

@@ -0,0 +1,2 @@
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export declare function Phases(props: SpinnerProps): import("react").JSX.Element;

package/dist/phases.js

@@ -0,0 +1,73 @@
+import { animation, duration } from "./motion.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+// src/phases.tsx
+const RADIUS = 10;
+const css = `
+.ld-phases-shade {
+  ${animation("phases", "ld-phases-wax", "ease-out")}
+  animation-delay: calc(${duration("phases")} / -2);
+}
+
+@keyframes ld-phases-wax {
+  from {
+    transform: translateX(20.5px);
+  }
+  50% {
+    transform: translateX(0);
+    animation-timing-function: ease-in;
+  }
+  to {
+    transform: translateX(-20.5px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-phases-shade {
+    transform: translateX(-10px);
+  }
+}
+`;
+function Phases(props) {
+	const shade = useId();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "phases",
+		children: css
+	}), /* @__PURE__ */ jsxs("svg", {
+		...spinnerRoot("phases", props),
+		fill: "currentColor",
+		role: "presentation",
+		viewBox: "0 0 24 24",
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", {
+				id: shade,
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "12",
+					fill: "white",
+					r: RADIUS
+				}), /* @__PURE__ */ jsx("circle", {
+					className: "ld-phases-shade",
+					cx: "12",
+					cy: "12",
+					fill: "black",
+					r: 10.25
+				})]
+			}) }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				opacity: "0.2",
+				r: RADIUS
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				mask: `url(#${shade})`,
+				r: RADIUS
+			})
+		]
+	})] });
+}
+export { Phases };

package/dist/pulse.d.ts

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

package/dist/pulse.js

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

package/dist/radar.d.ts

@@ -1,10 +1,4 @@
-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-BM_1QWrA.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export interface RadarProps extends SpinnerProps, EasingProps {}
+export declare function Radar({ easing, ...rest }: RadarProps): import("react").JSX.Element;

package/dist/radar.js

@@ -1,9 +1,63 @@
-import {
-  Radar
-} from "./chunk-2OX27TAE.js";
-import "./chunk-A2PZBHTA.js";
-import "./chunk-UAO52LUL.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";
+// 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"
+			})
+		]
+	})] });
+}
+export { Radar };