@nsaa/core 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/loaders/eclipse.js

@@ -0,0 +1,69 @@
+"use client";
+import { STEP_VAR, animation, stagger } from "./motion.js";
+import { SpinnerStyle, reducedMotion, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/eclipse.tsx
+const DOTS = [0, 1];
+const css = `
+.nsaa-loader-eclipse {
+  position: relative;
+}
+
+.nsaa-loader-eclipse-dot {
+  position: absolute;
+  top: 30%;
+  left: 30%;
+  width: 40%;
+  height: 40%;
+  background: currentColor;
+  border-radius: 50%;
+  ${animation("eclipse", ["nsaa-loader-eclipse-slide", "nsaa-loader-eclipse-depth"], "ease-in-out")}
+  animation-delay: ${stagger("eclipse", DOTS.length)};
+}
+
+@keyframes nsaa-loader-eclipse-slide {
+  0%,
+  100% {
+    translate: 75% 0;
+  }
+  50% {
+    translate: -75% 0;
+  }
+}
+
+@keyframes nsaa-loader-eclipse-depth {
+  0%,
+  50%,
+  100% {
+    opacity: 0.75;
+    scale: 1;
+  }
+  25% {
+    opacity: 1;
+    scale: 1.3;
+  }
+  75% {
+    opacity: 0.5;
+    scale: 0.7;
+  }
+}
+
+${reducedMotion(`
+  .nsaa-loader-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: "nsaa-loader-eclipse-dot",
+			style: step(index)
+		}, index))
+	})] });
+}
+export { Eclipse };

package/dist/loaders/fade.js

@@ -0,0 +1,28 @@
+"use client";
+import { animation, stagger } from "./motion.js";
+import { reducedMotion } from "./frame.js";
+// src/loaders/fade.ts
+function fadeCss(name, element, count, { dim, rest }) {
+	return `
+.nsaa-loader-${name}-${element} {
+  ${animation(name, `nsaa-loader-${name}-fade`, "linear")}
+  animation-delay: ${stagger(name, count)};
+}
+
+@keyframes nsaa-loader-${name}-fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: ${dim};
+  }
+}
+
+${reducedMotion(`
+  .nsaa-loader-${name}-${element} {
+    opacity: ${rest};
+  }
+`)}
+`;
+}
+export { fadeCss };

package/dist/loaders/flip.d.ts

@@ -0,0 +1,3 @@
+
+import { SpinnerProps } from "./types.js";
+export declare function Flip(props: SpinnerProps): import("react").JSX.Element;

package/dist/loaders/flip.js

@@ -0,0 +1,41 @@
+"use client";
+import { SIZE, animation } from "./motion.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/flip.tsx
+const css = `
+.nsaa-loader-flip {
+  perspective: calc(${SIZE} * 3);
+}
+
+.nsaa-loader-flip-face {
+  width: 64%;
+  height: 64%;
+  margin: 18%;
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.06);
+  ${animation("flip", "nsaa-loader-flip-turn", "ease-in-out")}
+}
+
+@keyframes nsaa-loader-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: "nsaa-loader-flip-face" })
+	})] });
+}
+export { Flip };

package/dist/{frame-CK9IBOZB.js → loaders/frame.js}

@@ -1,54 +1,6 @@
 "use client";
-import { n as loader } from "./motion-NQq2BA78.js";
+import { DURATION_VAR, PLAY_STATE_VAR, SIZE, SIZE_VAR, STEP_VAR } from "./motion.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-// src/loaders/motion.ts
-const DURATION_VAR = "--nsaa-loader-duration";
-const PLAY_STATE_VAR = "--nsaa-loader-play-state";
-const SIZE_VAR = "--nsaa-loader-size";
-const STEP_VAR = "--nsaa-loader-step";
-const SIZE = `var(${SIZE_VAR}, var(--nsaa-loader-size-md))`;
-const SPINNER_MOTION = {
-	arc: loader.duration.arc,
-	atom: loader.duration.atom,
-	blocks: loader.duration.blocks,
-	"bouncing-dots": loader.duration["bouncing-dots"],
-	cascade: loader.duration.cascade,
-	"circular-dots": loader.duration["circular-dots"],
-	classic: loader.duration.classic,
-	"classic-v2": loader.duration["classic-v2"],
-	clock: loader.duration.clock,
-	comet: loader.duration.comet,
-	compass: loader.duration.compass,
-	dual: loader.duration.dual,
-	eclipse: loader.duration.eclipse,
-	flip: loader.duration.flip,
-	gather: loader.duration.gather,
-	leap: loader.duration.leap,
-	"linear-dots": loader.duration["linear-dots"],
-	loading: loader.duration.loading,
-	morph: loader.duration.morph,
-	orbit: loader.duration.orbit,
-	pulse: loader.duration.pulse,
-	radar: loader.duration.radar,
-	ring: loader.duration.ring,
-	ripple: loader.duration.ripple,
-	slide: loader.duration.slide,
-	snake: loader.duration.snake,
-	swirl: loader.duration.swirl,
-	trace: loader.duration.trace,
-	wave: loader.duration.wave
-};
-function duration(name) {
-	return `var(${DURATION_VAR}, var(--nsaa-loader-duration-${name}))`;
-}
-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};`;
-}
 // src/loaders/frame.tsx
 /**
 * Nsaa: a loader's reduced-motion rules apply under the OS setting (unless the app forces full
@@ -112,4 +64,4 @@ function spinnerRoot(name, { className, color, duration, playState, size }) {
 		})
 	};
 }
-export { spinnerRoot as a, PLAY_STATE_VAR as c, STEP_VAR as d, animation as f, reducedMotion as i, SIZE as l, SpinnerStyle as n, step as o, stagger as p, cssVars as r, DURATION_VAR as s, PauseStyle as t, SPINNER_MOTION as u };
+export { PauseStyle, SpinnerStyle, cssVars, reducedMotion, spinnerRoot, step };

package/dist/loaders/gather.d.ts

@@ -0,0 +1,3 @@
+
+import { SpinnerProps } from "./types.js";
+export declare function Gather(props: SpinnerProps): import("react").JSX.Element;

package/dist/loaders/gather.js

@@ -0,0 +1,85 @@
+"use client";
+import { SIZE, animation } from "./motion.js";
+import { SpinnerStyle, cssVars, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/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 = `
+.nsaa-loader-gather-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: ${GAP}%;
+  width: 100%;
+  height: 100%;
+  ${animation("gather", "nsaa-loader-gather-turn", "ease-in-out")}
+}
+
+.nsaa-loader-gather-block {
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.14);
+  ${animation("gather", "nsaa-loader-gather-pull", "ease-in-out")}
+}
+
+@keyframes nsaa-loader-gather-pull {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+  30%,
+  60% {
+    transform: translate(
+      calc(var(--nsaa-loader-gather-x) * ${PULL}),
+      calc(var(--nsaa-loader-gather-y) * ${PULL})
+    );
+  }
+}
+
+@keyframes nsaa-loader-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: "nsaa-loader-gather-group",
+			children: BLOCKS.map(({ x, y }) => /* @__PURE__ */ jsx("div", {
+				className: "nsaa-loader-gather-block",
+				style: cssVars({
+					"--nsaa-loader-gather-x": x,
+					"--nsaa-loader-gather-y": y
+				})
+			}, `${x}${y}`))
+		})
+	})] });
+}
+export { Gather };

package/dist/loaders/leap.d.ts

@@ -0,0 +1,3 @@
+
+import { SpinnerProps } from "./types.js";
+export declare function Leap(props: SpinnerProps): import("react").JSX.Element;

package/dist/loaders/leap.js

@@ -0,0 +1,67 @@
+"use client";
+import { SIZE, STEP_VAR, animation, stagger } from "./motion.js";
+import { SpinnerStyle, reducedMotion, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+// src/loaders/leap.tsx
+const DOTS = Array.from({ length: 3 }, (_, index) => index);
+const css = `
+.nsaa-loader-leap {
+  --nsaa-loader-leap-dot: round(calc(${SIZE} * 0.22), 1px);
+  --nsaa-loader-leap-gap: round(down, calc((${SIZE} - var(--nsaa-loader-leap-dot)) / 2), 1px);
+  position: relative;
+}
+
+.nsaa-loader-leap-wrapper {
+  position: absolute;
+  top: round(calc((${SIZE} - var(--nsaa-loader-leap-dot)) / 2), 1px);
+  left: calc(${SIZE} - var(--nsaa-loader-leap-dot) - var(--nsaa-loader-leap-gap) * 2);
+  width: calc(var(--nsaa-loader-leap-gap) * 2 + var(--nsaa-loader-leap-dot));
+  height: var(--nsaa-loader-leap-dot);
+  ${animation("leap", "nsaa-loader-leap-hop", "ease-in-out")}
+  animation-delay: ${stagger("leap", DOTS.length)};
+}
+
+.nsaa-loader-leap-dot {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: var(--nsaa-loader-leap-dot);
+  background: currentColor;
+  border-radius: 50%;
+}
+
+@keyframes nsaa-loader-leap-hop {
+  0% {
+    transform: translateX(0) rotate(0);
+  }
+  33.33% {
+    transform: translateX(0) rotate(180deg);
+  }
+  66.66% {
+    transform: translateX(calc(var(--nsaa-loader-leap-gap) * -1)) rotate(180deg);
+  }
+  100% {
+    transform: translateX(calc(var(--nsaa-loader-leap-gap) * -2)) rotate(180deg);
+  }
+}
+
+${reducedMotion(`
+  .nsaa-loader-leap-wrapper {
+    transform: translateX(calc(var(${STEP_VAR}) * var(--nsaa-loader-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: "nsaa-loader-leap-wrapper",
+		style: step(index),
+		children: /* @__PURE__ */ jsx("div", { className: "nsaa-loader-leap-dot" })
+	}, index)))] });
+}
+export { Leap };

package/dist/loaders/linear-dots.d.ts

@@ -0,0 +1,3 @@
+
+import { SpinnerProps } from "./types.js";
+export declare function LinearDots(props: SpinnerProps): import("react").JSX.Element;

package/dist/loaders/linear-dots.js

@@ -0,0 +1,54 @@
+"use client";
+import { SIZE, animation, stagger } from "./motion.js";
+import { SpinnerStyle, reducedMotion, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/linear-dots.tsx
+const DOTS = Array.from({ length: 3 }, (_, index) => index);
+const css = `
+.nsaa-loader-linear-dots {
+  display: flex;
+  align-items: center;
+  gap: calc(${SIZE} * 0.1875);
+  width: auto;
+}
+
+.nsaa-loader-linear-dots-dot {
+  width: calc(${SIZE} * 0.1875);
+  height: calc(${SIZE} * 0.1875);
+  background: currentColor;
+  border-radius: 9999px;
+  ${animation("linear-dots", "nsaa-loader-linear-dots-fade", "linear")}
+  animation-delay: ${stagger("linear-dots", DOTS.length)};
+}
+
+@keyframes nsaa-loader-linear-dots-fade {
+  0% {
+    opacity: 1;
+  }
+  66.67% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+${reducedMotion(`
+  .nsaa-loader-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: "nsaa-loader-linear-dots-dot",
+			style: step(dot)
+		}, dot))
+	})] });
+}
+export { LinearDots };

package/dist/loaders/loading.d.ts

@@ -0,0 +1,3 @@
+
+import { SpinnerProps } from "./types.js";
+export declare function Loading(props: SpinnerProps): import("react").JSX.Element;

package/dist/loaders/loading.js

@@ -0,0 +1,64 @@
+"use client";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { fadeCss } from "./fade.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/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: "nsaa-loader-loading-segment",
+			d: BLOCK,
+			style: step(segment),
+			transform: `translate(${x} ${y})`
+		}, `${x}-${y}`))
+	})] });
+}
+export { Loading };

package/dist/loaders/morph.d.ts

@@ -0,0 +1,3 @@
+
+import { SpinnerProps } from "./types.js";
+export declare function Morph(props: SpinnerProps): import("react").JSX.Element;

package/dist/loaders/morph.js

@@ -0,0 +1,40 @@
+"use client";
+import { SIZE, animation } from "./motion.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/morph.tsx
+const css = `
+.nsaa-loader-morph-shape {
+  width: 64%;
+  height: 64%;
+  margin: 18%;
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.08);
+  ${animation("morph", "nsaa-loader-morph-round", "ease-in-out")}
+}
+
+@keyframes nsaa-loader-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: "nsaa-loader-morph-shape" })
+	})] });
+}
+export { Morph };

package/dist/loaders/motion.d.ts

@@ -0,0 +1,35 @@
+
+export declare const DURATION_VAR = "--nsaa-loader-duration";
+export declare const PLAY_STATE_VAR = "--nsaa-loader-play-state";
+export 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;
+};
+export type SpinnerName = keyof typeof SPINNER_MOTION;

package/dist/loaders/motion.js

@@ -0,0 +1,51 @@
+"use client";
+import { loader } from "../tokens/dist/motion.js";
+// src/loaders/motion.ts
+const DURATION_VAR = "--nsaa-loader-duration";
+const PLAY_STATE_VAR = "--nsaa-loader-play-state";
+const SIZE_VAR = "--nsaa-loader-size";
+const STEP_VAR = "--nsaa-loader-step";
+const SIZE = `var(${SIZE_VAR}, var(--nsaa-loader-size-md))`;
+const SPINNER_MOTION = {
+	arc: loader.duration.arc,
+	atom: loader.duration.atom,
+	blocks: loader.duration.blocks,
+	"bouncing-dots": loader.duration["bouncing-dots"],
+	cascade: loader.duration.cascade,
+	"circular-dots": loader.duration["circular-dots"],
+	classic: loader.duration.classic,
+	"classic-v2": loader.duration["classic-v2"],
+	clock: loader.duration.clock,
+	comet: loader.duration.comet,
+	compass: loader.duration.compass,
+	dual: loader.duration.dual,
+	eclipse: loader.duration.eclipse,
+	flip: loader.duration.flip,
+	gather: loader.duration.gather,
+	leap: loader.duration.leap,
+	"linear-dots": loader.duration["linear-dots"],
+	loading: loader.duration.loading,
+	morph: loader.duration.morph,
+	orbit: loader.duration.orbit,
+	pulse: loader.duration.pulse,
+	radar: loader.duration.radar,
+	ring: loader.duration.ring,
+	ripple: loader.duration.ripple,
+	slide: loader.duration.slide,
+	snake: loader.duration.snake,
+	swirl: loader.duration.swirl,
+	trace: loader.duration.trace,
+	wave: loader.duration.wave
+};
+function duration(name) {
+	return `var(${DURATION_VAR}, var(--nsaa-loader-duration-${name}))`;
+}
+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 { DURATION_VAR, PLAY_STATE, PLAY_STATE_VAR, SIZE, SIZE_VAR, SPINNER_MOTION, STEP_VAR, animation, duration, stagger };

package/dist/loaders/orbit.d.ts

@@ -0,0 +1,5 @@
+
+import { SpinnerProps } from "./types.js";
+import { EasingProps } from "./easing.js";
+export interface OrbitProps extends SpinnerProps, EasingProps {}
+export declare function Orbit({ easing, ...rest }: OrbitProps): import("react").JSX.Element;

package/dist/loaders/orbit.js

@@ -0,0 +1,44 @@
+"use client";
+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/loaders/orbit.tsx
+const css = `
+.nsaa-loader-orbit {
+  --nsaa-loader-orbit-stroke: calc(${SIZE} * 0.0625);
+  position: relative;
+}
+
+.nsaa-loader-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(--nsaa-loader-orbit-stroke)), #000 0);
+  mask: radial-gradient(farthest-side, transparent calc(100% - var(--nsaa-loader-orbit-stroke)), #000 0);
+}
+
+.nsaa-loader-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: "nsaa-loader-orbit-dot" }), /* @__PURE__ */ jsx("div", { className: `nsaa-loader-orbit-track ${spinClass("orbit", easing)}` })]
+	})] });
+}
+export { Orbit };

package/dist/loaders/pulse.d.ts

@@ -0,0 +1,3 @@
+
+import { SpinnerProps } from "./types.js";
+export declare function Pulse(props: SpinnerProps): import("react").JSX.Element;