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

package/dist/loaders/atom.js

@@ -0,0 +1,70 @@
+"use client";
+import { SIZE, stagger } from "./motion.js";
+import { rotationCss, spinClass } from "./easing.js";
+import { SpinnerStyle, cssVars, reducedMotion, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/atom.tsx
+const ORBITS = Array.from({ length: 3 }, (_, index) => index);
+const TILT = 180 / ORBITS.length;
+const css = `
+.nsaa-loader-atom {
+  position: relative;
+}
+
+.nsaa-loader-atom-shell {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: ${`calc(${SIZE} * 0.055)`} solid currentColor;
+  border-radius: 9999px;
+}
+
+.nsaa-loader-atom-orbit {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+  transform: rotate(var(--nsaa-loader-atom-tilt)) rotateX(90deg);
+}
+
+.nsaa-loader-atom-ring {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: ${`calc(${SIZE} * 0.045)`} solid currentColor;
+  border-radius: 9999px;
+  transform: rotateX(90deg);
+}
+
+${rotationCss("atom")}
+
+.nsaa-loader-atom-spin {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+  animation-delay: ${stagger("atom", ORBITS.length)};
+}
+
+${reducedMotion(`
+  .nsaa-loader-atom-spin {
+    transform: rotate(${TILT}deg);
+  }
+`)}
+`;
+function Atom({ easing, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "atom",
+		children: css
+	}), /* @__PURE__ */ jsxs("div", {
+		...spinnerRoot("atom", rest),
+		children: [/* @__PURE__ */ jsx("div", { className: "nsaa-loader-atom-shell" }), ORBITS.map((index) => /* @__PURE__ */ jsx("div", {
+			className: "nsaa-loader-atom-orbit",
+			style: cssVars({ "--nsaa-loader-atom-tilt": `${index * TILT}deg` }),
+			children: /* @__PURE__ */ jsx("div", {
+				className: spinClass("atom", easing),
+				style: step(index),
+				children: /* @__PURE__ */ jsx("div", { className: "nsaa-loader-atom-ring" })
+			})
+		}, index))]
+	})] });
+}
+export { Atom };

package/dist/loaders/blocks.d.ts

@@ -0,0 +1,8 @@
+
+import { SpinnerProps } from "./types.js";
+export type BlocksSweep = "columns" | "diagonal" | "rows";
+export declare const DEFAULT_BLOCKS_SWEEP: BlocksSweep;
+export interface BlocksProps extends SpinnerProps {
+  sweep?: BlocksSweep;
+}
+export declare function Blocks({ sweep, ...rest }: BlocksProps): import("react").JSX.Element;

package/dist/loaders/blocks.js

@@ -0,0 +1,74 @@
+"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/blocks.tsx
+const DEFAULT_BLOCKS_SWEEP = "diagonal";
+const SIDE = 3;
+const CELLS = Array.from({ length: 9 }, (_, index) => ({
+	col: index % SIDE,
+	row: Math.floor(index / SIDE)
+}));
+const SWEEPS = {
+	columns: {
+		count: SIDE,
+		place: ({ col }) => col
+	},
+	diagonal: {
+		count: 5,
+		place: ({ col, row }) => row + col
+	},
+	rows: {
+		count: SIDE,
+		place: ({ row }) => row
+	}
+};
+const css = `
+.nsaa-loader-blocks {
+  display: grid;
+  grid-template-columns: repeat(${SIDE}, 1fr);
+  grid-template-rows: repeat(${SIDE}, 1fr);
+  gap: calc(${SIZE} * 0.1);
+}
+
+.nsaa-loader-blocks-cell {
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.0625);
+  ${animation("blocks", "nsaa-loader-blocks-sweep", "ease-in-out")}
+}
+${Object.entries(SWEEPS).map(([sweep, { count }]) => `
+.nsaa-loader-blocks-cell-${sweep} {
+  animation-delay: ${stagger("blocks", count)};
+}
+`).join("")}
+@keyframes nsaa-loader-blocks-sweep {
+  0%,
+  70%,
+  100% {
+    transform: scale(1);
+  }
+  35% {
+    transform: scale(0);
+  }
+}
+
+${reducedMotion(`
+  .nsaa-loader-blocks-cell {
+    transform: scale(0.8);
+  }
+`)}
+`;
+function Blocks({ sweep = DEFAULT_BLOCKS_SWEEP, ...rest }) {
+	const { place } = SWEEPS[sweep];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "blocks",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("blocks", rest),
+		children: CELLS.map((cell) => /* @__PURE__ */ jsx("div", {
+			className: `nsaa-loader-blocks-cell nsaa-loader-blocks-cell-${sweep}`,
+			style: step(place(cell))
+		}, `${cell.col}-${cell.row}`))
+	})] });
+}
+export { Blocks, DEFAULT_BLOCKS_SWEEP };

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

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

package/dist/loaders/bouncing-dots.js

@@ -0,0 +1,45 @@
+"use client";
+import { SIZE, animation, stagger } from "./motion.js";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/bouncing-dots.tsx
+const DOTS = Array.from({ length: 3 }, (_, index) => index);
+const css = `
+.nsaa-loader-bouncing-dots {
+  display: flex;
+  align-items: center;
+  gap: calc(${SIZE} * 0.2);
+  width: auto;
+}
+
+.nsaa-loader-bouncing-dots-dot {
+  width: calc(${SIZE} * 0.25);
+  height: calc(${SIZE} * 0.25);
+  background: currentColor;
+  border-radius: 9999px;
+  ${animation("bouncing-dots", "nsaa-loader-bouncing-dots-bounce", "ease-in-out alternate")}
+  animation-delay: ${stagger("bouncing-dots", DOTS.length)};
+}
+
+@keyframes nsaa-loader-bouncing-dots-bounce {
+  from {
+    transform: translateY(28%);
+  }
+  to {
+    transform: translateY(-72%);
+  }
+}
+`;
+function BouncingDots(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "bouncing-dots",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("bouncing-dots", props),
+		children: DOTS.map((dot) => /* @__PURE__ */ jsx("div", {
+			className: "nsaa-loader-bouncing-dots-dot",
+			style: step(dot)
+		}, dot))
+	})] });
+}
+export { BouncingDots };

package/dist/loaders/cap.d.ts

@@ -0,0 +1,6 @@
+
+export type Cap = "flat" | "round";
+export declare const DEFAULT_CAP: Cap;
+export interface CapProps {
+  cap?: Cap;
+}

package/dist/loaders/cap.js

@@ -0,0 +1,7 @@
+"use client";
+// src/loaders/cap.ts
+const DEFAULT_CAP = "round";
+function linecap(cap = DEFAULT_CAP) {
+	return cap === "flat" ? "butt" : "round";
+}
+export { DEFAULT_CAP, linecap };

package/dist/loaders/cascade.d.ts

@@ -0,0 +1,5 @@
+
+import { SpinnerProps } from "./types.js";
+import { CapProps } from "./cap.js";
+export interface CascadeProps extends SpinnerProps, CapProps {}
+export declare function Cascade({ cap, ...rest }: CascadeProps): import("react").JSX.Element;

package/dist/loaders/cascade.js

@@ -0,0 +1,50 @@
+"use client";
+import { linecap } from "./cap.js";
+import { animation, stagger } from "./motion.js";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/cascade.tsx
+const RADII = [
+	10.5,
+	7,
+	3.5
+];
+const css = `
+.nsaa-loader-cascade-arc {
+  transform-origin: center;
+  ${animation("cascade", "nsaa-loader-cascade-turn", "cubic-bezier(0.68, -0.75, 0.265, 1.75)")}
+  animation-delay: ${stagger("cascade", 24)};
+}
+
+@keyframes nsaa-loader-cascade-turn {
+  to {
+    transform: rotate(360deg);
+  }
+}
+`;
+function Cascade({ cap, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "cascade",
+		children: css
+	}), /* @__PURE__ */ jsx("svg", {
+		...spinnerRoot("cascade", rest),
+		fill: "none",
+		role: "presentation",
+		stroke: "currentColor",
+		strokeLinecap: linecap(cap),
+		strokeWidth: "2",
+		viewBox: "0 0 24 24",
+		children: RADII.map((r, index) => {
+			const circumference = 2 * Math.PI * r;
+			return /* @__PURE__ */ jsx("circle", {
+				className: "nsaa-loader-cascade-arc",
+				cx: "12",
+				cy: "12",
+				r,
+				strokeDasharray: `${circumference / 4} ${circumference * 3 / 4}`,
+				style: step(index)
+			}, r);
+		})
+	})] });
+}
+export { Cascade };

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

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

package/dist/loaders/circular-dots.js

@@ -0,0 +1,40 @@
+"use client";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { fadeCss } from "./fade.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/circular-dots.tsx
+const DOTS = [
+	[8, 1.5],
+	[12.5962, 3.4038],
+	[14.5, 8],
+	[12.5962, 12.5962],
+	[8, 14.5],
+	[3.4038, 12.5962],
+	[1.5, 8],
+	[3.4038, 3.4038]
+];
+const css = `
+${fadeCss("circular-dots", "dot", DOTS.length, {
+	dim: .2,
+	rest: .6
+})}
+`;
+function CircularDots(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "circular-dots",
+		children: css
+	}), /* @__PURE__ */ jsx("svg", {
+		...spinnerRoot("circular-dots", props),
+		fill: "currentColor",
+		role: "presentation",
+		viewBox: "0 0 16 16",
+		children: DOTS.map(([cx, cy], index) => /* @__PURE__ */ jsx("circle", {
+			className: "nsaa-loader-circular-dots-dot",
+			cx,
+			cy,
+			r: "1.5",
+			style: step(index)
+		}, `${cx}-${cy}`))
+	})] });
+}
+export { CircularDots };

package/dist/loaders/classic-v2.d.ts

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

package/dist/loaders/classic-v2.js

@@ -0,0 +1,41 @@
+"use client";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { fadeCss } from "./fade.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/classic-v2.tsx
+const TICKS = [
+	"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",
+	"M11.7712 5.17154C11.5109 5.43189 11.0888 5.43189 10.8284 5.17154C10.5681 4.91119 10.5681 4.48908 10.8284 4.22873L12.714 2.34311C12.9744 2.08276 13.3965 2.08276 13.6568 2.34311C13.9172 2.60346 13.9172 3.02557 13.6568 3.28592L11.7712 5.17154Z",
+	"M12.6667 8.66667C12.2985 8.66667 12 8.36819 12 8.00001C12 7.63182 12.2985 7.33334 12.6667 7.33334H15.3333C15.7015 7.33334 16 7.63182 16 8.00001C16 8.36819 15.7015 8.66667 15.3333 8.66667H12.6667Z",
+	"M10.8284 11.7713C10.5681 11.5109 10.5681 11.0888 10.8284 10.8284C11.0888 10.5681 11.5109 10.5681 11.7712 10.8284L13.6568 12.7141C13.9172 12.9744 13.9172 13.3965 13.6568 13.6569C13.3965 13.9172 12.9744 13.9172 12.714 13.6569L10.8284 11.7713Z",
+	"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",
+	"M3.28594 13.6569C3.02559 13.9172 2.60348 13.9172 2.34313 13.6569C2.08278 13.3965 2.08278 12.9744 2.34313 12.714L4.22875 10.8284C4.4891 10.5681 4.91121 10.5681 5.17156 10.8284C5.43191 11.0888 5.43191 11.5109 5.17156 11.7712L3.28594 13.6569Z",
+	"M0.666667 8.66667C0.298477 8.66667 1.60941e-08 8.36819 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.36819 3.70152 8.66667 3.33333 8.66667H0.666667Z",
+	"M2.34315 3.28594C2.0828 3.02559 2.0828 2.60348 2.34315 2.34314C2.6035 2.08279 3.02561 2.08279 3.28596 2.34313L5.17158 4.22875C5.43193 4.4891 5.43193 4.91121 5.17158 5.17156C4.91123 5.43191 4.48912 5.43191 4.22877 5.17156L2.34315 3.28594Z"
+];
+const css = `
+${fadeCss("classic-v2", "tick", TICKS.length, {
+	dim: .4,
+	rest: .5
+})}
+`;
+function ClassicV2(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "classic-v2",
+		children: css
+	}), /* @__PURE__ */ jsx("svg", {
+		...spinnerRoot("classic-v2", props),
+		fill: "none",
+		role: "presentation",
+		viewBox: "0 0 16 16",
+		children: /* @__PURE__ */ jsx("g", {
+			fill: "currentColor",
+			children: TICKS.map((d, tick) => /* @__PURE__ */ jsx("path", {
+				className: "nsaa-loader-classic-v2-tick",
+				d,
+				style: step(tick)
+			}, d))
+		})
+	})] });
+}
+export { ClassicV2 };

package/dist/loaders/classic.d.ts

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

package/dist/loaders/classic.js

@@ -0,0 +1,48 @@
+"use client";
+import { SIZE, STEP_VAR } from "./motion.js";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { fadeCss } from "./fade.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/classic.tsx
+const BARS = Array.from({ length: 12 }, (_, index) => index);
+const css = `
+.nsaa-loader-classic-inner {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.nsaa-loader-classic-bar {
+  position: absolute;
+  top: -3.9%;
+  left: -10%;
+  width: 24%;
+  height: 8%;
+  background: currentColor;
+  border-radius: 6px;
+  transform: rotate(calc(var(${STEP_VAR}) * 30deg)) translate(146%);
+}
+
+${fadeCss("classic", "bar", BARS.length, {
+	dim: .15,
+	rest: .5
+})}
+`;
+function Classic(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "classic",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("classic", props),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "nsaa-loader-classic-inner",
+			children: BARS.map((bar) => /* @__PURE__ */ jsx("div", {
+				className: "nsaa-loader-classic-bar",
+				style: step(bar)
+			}, bar))
+		})
+	})] });
+}
+export { Classic };

package/dist/loaders/clock.d.ts

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

package/dist/loaders/clock.js

@@ -0,0 +1,31 @@
+"use client";
+import { rotationCss, spinClass } from "./easing.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/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"
+		})]
+	})] });
+}
+export { Clock };

package/dist/loaders/comet.d.ts

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

package/dist/loaders/comet.js

@@ -0,0 +1,52 @@
+"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/comet.tsx
+const css = `
+.nsaa-loader-comet {
+  --nsaa-loader-comet-stroke: calc(${SIZE} * 0.12);
+  position: relative;
+}
+
+.nsaa-loader-comet-spin {
+  position: absolute;
+  inset: 0;
+}
+
+.nsaa-loader-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(--nsaa-loader-comet-stroke)), #000 0);
+  mask: radial-gradient(farthest-side, transparent calc(100% - var(--nsaa-loader-comet-stroke)), #000 0);
+}
+
+.nsaa-loader-comet-head {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: var(--nsaa-loader-comet-stroke);
+  height: var(--nsaa-loader-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: "nsaa-loader-comet-tail" }), /* @__PURE__ */ jsx("div", { className: "nsaa-loader-comet-head" })]
+		})
+	})] });
+}
+export { Comet };

package/dist/loaders/compass.d.ts

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

package/dist/loaders/compass.js

@@ -0,0 +1,39 @@
+"use client";
+import { animation } from "./motion.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/compass.tsx
+const css = `
+.nsaa-loader-compass-ticks {
+  transform-origin: center;
+  ${animation("compass", "nsaa-loader-compass-turn", "ease-in-out")}
+}
+
+@keyframes nsaa-loader-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: "nsaa-loader-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" })
+			]
+		})
+	})] });
+}
+export { Compass };

package/dist/loaders/dual.d.ts

@@ -0,0 +1,6 @@
+
+import { SpinnerProps } from "./types.js";
+import { CapProps } from "./cap.js";
+import { EasingProps } from "./easing.js";
+export interface DualProps extends SpinnerProps, EasingProps, CapProps {}
+export declare function Dual({ cap, easing, ...rest }: DualProps): import("react").JSX.Element;

package/dist/loaders/dual.js

@@ -0,0 +1,47 @@
+"use client";
+import { linecap } from "./cap.js";
+import { rotationCss, spinClass } from "./easing.js";
+import { SpinnerStyle, reducedMotion, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/dual.tsx
+const css = `
+${rotationCss("dual")}
+
+.nsaa-loader-dual-inner {
+  animation-direction: reverse;
+}
+
+${reducedMotion(`
+  .nsaa-loader-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: `nsaa-loader-dual-inner ${spinClass("dual", easing)}`,
+			cx: "12",
+			cy: "12",
+			r: "5.5",
+			strokeDasharray: "10 24.6"
+		})]
+	})] });
+}
+export { Dual };

package/dist/loaders/easing.d.ts

@@ -0,0 +1,6 @@
+
+export type Easing = "linear" | "ease-in-out" | "stacked";
+export declare const DEFAULT_EASING: Easing;
+export interface EasingProps {
+  easing?: Easing;
+}

package/dist/loaders/easing.js

@@ -0,0 +1,34 @@
+"use client";
+import { animation } from "./motion.js";
+// src/loaders/easing.ts
+const DEFAULT_EASING = "linear";
+function spinClass(name, easing = DEFAULT_EASING) {
+	const base = `nsaa-loader-${name}-spin`;
+	return easing === "linear" ? base : `${base} ${base}-${easing}`;
+}
+const ROTATE = `to {
+    transform: rotate(360deg);
+  }`;
+function rotationCss(name, turn = ROTATE) {
+	return `
+.nsaa-loader-${name}-spin {
+  transform-origin: center;
+  ${animation(name, `nsaa-loader-${name}-rotate`, "linear")}
+}
+
+.nsaa-loader-${name}-spin-ease-in-out {
+  animation-timing-function: ease-in-out;
+}
+
+.nsaa-loader-${name}-spin-stacked {
+  animation-name: nsaa-loader-${name}-rotate, nsaa-loader-${name}-rotate;
+  animation-timing-function: linear, ease-in-out;
+  animation-composition: add;
+}
+
+@keyframes nsaa-loader-${name}-rotate {
+  ${turn}
+}
+`;
+}
+export { DEFAULT_EASING, rotationCss, spinClass };

package/dist/loaders/eclipse.d.ts

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