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

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;

package/dist/loaders/pulse.js

@@ -0,0 +1,52 @@
+"use client";
+import { animation } from "./motion.js";
+import { SpinnerStyle, reducedMotion, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/pulse.tsx
+const css = `
+.nsaa-loader-pulse-ring {
+  transform-origin: center;
+  ${animation("pulse", "nsaa-loader-pulse-ripple", "ease-out")}
+}
+
+@keyframes nsaa-loader-pulse-ripple {
+  from {
+    opacity: 0.4;
+    transform: scale(0.25);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+${reducedMotion(`
+  .nsaa-loader-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: "nsaa-loader-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/loaders/radar.d.ts

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

package/dist/loaders/radar.js

@@ -0,0 +1,64 @@
+"use client";
+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/loaders/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 };

package/dist/loaders/ring.d.ts

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

package/dist/loaders/ring.js

@@ -0,0 +1,38 @@
+"use client";
+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/loaders/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"
+		})]
+	})] });
+}
+export { Ring };

package/dist/loaders/ripple.d.ts

@@ -0,0 +1,8 @@
+
+import { SpinnerProps } from "./types.js";
+export type RippleDirection = "in" | "out";
+export declare const DEFAULT_RIPPLE_DIRECTION: RippleDirection;
+export interface RippleProps extends SpinnerProps {
+  direction?: RippleDirection;
+}
+export declare function Ripple({ direction, ...rest }: RippleProps): import("react").JSX.Element;

package/dist/loaders/ripple.js

@@ -0,0 +1,57 @@
+"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";
+// src/loaders/ripple.tsx
+const DEFAULT_RIPPLE_DIRECTION = "out";
+const RINGS = Array.from({ length: 3 }, (_, index) => index);
+const css = `
+.nsaa-loader-ripple {
+  position: relative;
+}
+
+.nsaa-loader-ripple-ring {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: calc(${SIZE} * 0.08) solid currentColor;
+  border-radius: 9999px;
+  ${animation("ripple", "nsaa-loader-ripple-spread", "ease-out")}
+  animation-delay: ${stagger("ripple", RINGS.length)};
+}
+
+.nsaa-loader-ripple-ring-in {
+  animation-direction: reverse;
+}
+
+@keyframes nsaa-loader-ripple-spread {
+  from {
+    opacity: 1;
+    transform: scale(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+${reducedMotion(`
+  .nsaa-loader-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: `nsaa-loader-ripple-ring nsaa-loader-ripple-ring-${direction}`,
+			style: step(index)
+		}, index))
+	})] });
+}
+export { DEFAULT_RIPPLE_DIRECTION, Ripple };

package/dist/loaders/slide.d.ts

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

package/dist/loaders/slide.js

@@ -0,0 +1,74 @@
+"use client";
+import { animation, stagger } from "./motion.js";
+import { SpinnerStyle, cssVars, reducedMotion, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/slide.tsx
+const DOT = 34;
+const MARGIN = 6;
+const FAR = `${(54 / DOT * 100).toFixed(1)}%`;
+const RESTS = [
+	`translate(${FAR}, 0)`,
+	"translate(0, 0)",
+	`translate(0, ${FAR})`
+];
+const css = `
+.nsaa-loader-slide {
+  position: relative;
+}
+
+.nsaa-loader-slide-dot {
+  position: absolute;
+  top: ${MARGIN}%;
+  left: ${MARGIN}%;
+  width: ${DOT}%;
+  height: ${DOT}%;
+  background: currentColor;
+  border-radius: 50%;
+  ${animation("slide", "nsaa-loader-slide-walk", "ease-in-out")}
+  animation-delay: ${stagger("slide", RESTS.length)};
+}
+
+@keyframes nsaa-loader-slide-walk {
+  0% {
+    transform: translate(${FAR}, 0);
+  }
+  8.33%,
+  25% {
+    transform: translate(${FAR}, ${FAR});
+  }
+  33.33%,
+  50% {
+    transform: translate(0, ${FAR});
+  }
+  58.33%,
+  75% {
+    transform: translate(0, 0);
+  }
+  83.33%,
+  100% {
+    transform: translate(${FAR}, 0);
+  }
+}
+
+${reducedMotion(`
+  .nsaa-loader-slide-dot {
+    transform: var(--nsaa-loader-slide-rest);
+  }
+`)}
+`;
+function Slide(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "slide",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("slide", props),
+		children: RESTS.map((rest, index) => /* @__PURE__ */ jsx("div", {
+			className: "nsaa-loader-slide-dot",
+			style: cssVars({
+				...step(index),
+				"--nsaa-loader-slide-rest": rest
+			})
+		}, rest))
+	})] });
+}
+export { Slide };

package/dist/loaders/snake.d.ts

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

package/dist/loaders/snake.js

@@ -0,0 +1,59 @@
+"use client";
+import { linecap } from "./cap.js";
+import { animation } from "./motion.js";
+import { rotationCss, spinClass } from "./easing.js";
+import { SpinnerStyle, reducedMotion, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/snake.tsx
+const css = `
+${rotationCss("snake")}
+
+.nsaa-loader-snake-dash {
+  ${animation("snake", "nsaa-loader-snake-stretch", "ease-in-out")}
+}
+
+@keyframes nsaa-loader-snake-stretch {
+  0% {
+    stroke-dasharray: 1 100;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 45 100;
+    stroke-dashoffset: -17;
+  }
+  100% {
+    stroke-dasharray: 45 100;
+    stroke-dashoffset: -62;
+  }
+}
+
+${reducedMotion(`
+  .nsaa-loader-snake-dash {
+    stroke-dasharray: 18 100;
+  }
+`)}
+`;
+function Snake({ cap, easing, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "snake",
+		children: css
+	}), /* @__PURE__ */ jsx("svg", {
+		...spinnerRoot("snake", rest),
+		fill: "none",
+		role: "presentation",
+		viewBox: "0 0 24 24",
+		children: /* @__PURE__ */ jsx("g", {
+			className: spinClass("snake", easing),
+			children: /* @__PURE__ */ jsx("circle", {
+				className: "nsaa-loader-snake-dash",
+				cx: "12",
+				cy: "12",
+				r: "10",
+				stroke: "currentColor",
+				strokeLinecap: linecap(cap),
+				strokeWidth: "2.5"
+			})
+		})
+	})] });
+}
+export { Snake };

package/dist/loaders/spinners.d.ts

@@ -0,0 +1,61 @@
+
+import { Arc } from "./arc.js";
+import { Atom } from "./atom.js";
+import { Blocks } from "./blocks.js";
+import { BouncingDots } from "./bouncing-dots.js";
+import { Cascade } from "./cascade.js";
+import { CircularDots } from "./circular-dots.js";
+import { Classic } from "./classic.js";
+import { ClassicV2 } from "./classic-v2.js";
+import { Clock } from "./clock.js";
+import { Comet } from "./comet.js";
+import { Compass } from "./compass.js";
+import { Dual } from "./dual.js";
+import { Eclipse } from "./eclipse.js";
+import { Flip } from "./flip.js";
+import { Gather } from "./gather.js";
+import { Leap } from "./leap.js";
+import { LinearDots } from "./linear-dots.js";
+import { Loading } from "./loading.js";
+import { Morph } from "./morph.js";
+import { Orbit } from "./orbit.js";
+import { Pulse } from "./pulse.js";
+import { Radar } from "./radar.js";
+import { Ring } from "./ring.js";
+import { Ripple } from "./ripple.js";
+import { Slide } from "./slide.js";
+import { Snake } from "./snake.js";
+import { Swirl } from "./swirl.js";
+import { Trace } from "./trace.js";
+import { Wave } from "./wave.js";
+export declare const SPINNERS: {
+  arc: typeof Arc;
+  atom: typeof Atom;
+  blocks: typeof Blocks;
+  "bouncing-dots": typeof BouncingDots;
+  cascade: typeof Cascade;
+  "circular-dots": typeof CircularDots;
+  classic: typeof Classic;
+  "classic-v2": typeof ClassicV2;
+  clock: typeof Clock;
+  comet: typeof Comet;
+  compass: typeof Compass;
+  dual: typeof Dual;
+  eclipse: typeof Eclipse;
+  flip: typeof Flip;
+  gather: typeof Gather;
+  leap: typeof Leap;
+  "linear-dots": typeof LinearDots;
+  loading: typeof Loading;
+  morph: typeof Morph;
+  orbit: typeof Orbit;
+  pulse: typeof Pulse;
+  radar: typeof Radar;
+  ring: typeof Ring;
+  ripple: typeof Ripple;
+  slide: typeof Slide;
+  snake: typeof Snake;
+  swirl: typeof Swirl;
+  trace: typeof Trace;
+  wave: typeof Wave;
+};

package/dist/loaders/spinners.js

@@ -0,0 +1,63 @@
+"use client";
+import { Arc } from "./arc.js";
+import { BouncingDots } from "./bouncing-dots.js";
+import { CircularDots } from "./circular-dots.js";
+import { Classic } from "./classic.js";
+import { Orbit } from "./orbit.js";
+import { Pulse } from "./pulse.js";
+import { Ring } from "./ring.js";
+import { Wave } from "./wave.js";
+import { Atom } from "./atom.js";
+import { Blocks } from "./blocks.js";
+import { Cascade } from "./cascade.js";
+import { ClassicV2 } from "./classic-v2.js";
+import { Clock } from "./clock.js";
+import { Comet } from "./comet.js";
+import { Compass } from "./compass.js";
+import { Dual } from "./dual.js";
+import { Eclipse } from "./eclipse.js";
+import { Flip } from "./flip.js";
+import { Gather } from "./gather.js";
+import { Leap } from "./leap.js";
+import { LinearDots } from "./linear-dots.js";
+import { Loading } from "./loading.js";
+import { Morph } from "./morph.js";
+import { Radar } from "./radar.js";
+import { Ripple } from "./ripple.js";
+import { Slide } from "./slide.js";
+import { Snake } from "./snake.js";
+import { Swirl } from "./swirl.js";
+import { Trace } from "./trace.js";
+// src/loaders/spinners.ts
+const SPINNERS = {
+	arc: Arc,
+	atom: Atom,
+	blocks: Blocks,
+	"bouncing-dots": BouncingDots,
+	cascade: Cascade,
+	"circular-dots": CircularDots,
+	classic: Classic,
+	"classic-v2": ClassicV2,
+	clock: Clock,
+	comet: Comet,
+	compass: Compass,
+	dual: Dual,
+	eclipse: Eclipse,
+	flip: Flip,
+	gather: Gather,
+	leap: Leap,
+	"linear-dots": LinearDots,
+	loading: Loading,
+	morph: Morph,
+	orbit: Orbit,
+	pulse: Pulse,
+	radar: Radar,
+	ring: Ring,
+	ripple: Ripple,
+	slide: Slide,
+	snake: Snake,
+	swirl: Swirl,
+	trace: Trace,
+	wave: Wave
+};
+export { SPINNERS };

package/dist/loaders/swirl.d.ts

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

package/dist/loaders/swirl.js

@@ -0,0 +1,50 @@
+"use client";
+import { SIZE } 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/swirl.tsx
+const RING = [
+	0,
+	1,
+	2,
+	7,
+	null,
+	3,
+	6,
+	5,
+	4
+];
+const PLACES = RING.filter((place) => place !== null).length;
+const css = `
+.nsaa-loader-swirl {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: calc(${SIZE} * 0.15625);
+  box-sizing: border-box;
+  padding: calc(${SIZE} * 0.0625);
+}
+
+.nsaa-loader-swirl-cell {
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.0625);
+}
+${fadeCss("swirl", "cell", PLACES, {
+	dim: .2,
+	rest: .6
+})}
+`;
+function Swirl(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "swirl",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("swirl", props),
+		children: RING.map((place, index) => place === null ? /* @__PURE__ */ jsx("div", {}, index) : /* @__PURE__ */ jsx("div", {
+			className: "nsaa-loader-swirl-cell",
+			style: step(place)
+		}, index))
+	})] });
+}
+export { Swirl };

package/dist/loaders/text/shared.js

@@ -0,0 +1,25 @@
+"use client";
+import { PauseStyle, reducedMotion } from "../frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/text/shared.tsx
+/** A loader's turn: the prop, else an ancestor's `--nsaa-loader-duration`, else its token. */
+function textDuration(name) {
+	return `var(--nsaa-loader-duration, var(--nsaa-loader-duration-${name}))`;
+}
+const PLAY_STATE = "var(--nsaa-loader-play-state, running)";
+/** Scoped keyframes and rules, deduped by React 19 (`<style href precedence>`). */
+function TextLoaderStyle({ name, css, reduced }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PauseStyle, {}), /* @__PURE__ */ jsx("style", {
+		href: `nsaa-loader-${name}`,
+		precedence: "nsaa-loaders",
+		children: `${css}\n${reducedMotion(reduced)}`
+	})] });
+}
+/** The visually hidden words a status announces (the animated copy is aria-hidden). */
+function StatusLabel({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children
+	});
+}
+export { PLAY_STATE, StatusLabel, TextLoaderStyle, textDuration };