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

package/dist/loaders/text/text-loaders.js

@@ -0,0 +1,723 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { PLAY_STATE, StatusLabel, TextLoaderStyle, textDuration } from "./shared.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/text/text-loaders.tsx
+const durationVar = (duration) => duration === void 0 ? void 0 : { "--nsaa-loader-duration": `${duration}ms` };
+const SHIMMER = `
+.nsaa-loader-shimmer-text {
+  --nsaa-loader-spread: calc(var(--nsaa-loader-chars, 10) * 2px);
+  display: inline-block;
+  -webkit-text-fill-color: transparent;
+  background-image:
+    linear-gradient(90deg, transparent calc(50% - var(--nsaa-loader-spread)), currentColor, transparent calc(50% + var(--nsaa-loader-spread))),
+    linear-gradient(color-mix(in oklab, currentColor 55%, transparent), color-mix(in oklab, currentColor 55%, transparent));
+  background-size: 250% 100%, auto;
+  background-repeat: no-repeat, padding-box;
+  background-clip: text;
+  -webkit-background-clip: text;
+  animation: nsaa-loader-shimmer-text ${textDuration("shimmer-text")} linear infinite;
+  animation-play-state: ${PLAY_STATE};
+}
+@keyframes nsaa-loader-shimmer-text {
+  from { background-position: 100% center, 0 0; }
+  to { background-position: 0% center, 0 0; }
+}
+@media (forced-colors: active) {
+  .nsaa-loader-shimmer-text {
+    -webkit-text-fill-color: CanvasText;
+    background: none;
+    animation: none;
+  }
+}`;
+const STATIC_SHIMMER = `
+.nsaa-loader-shimmer-text {
+  -webkit-text-fill-color: currentColor;
+  background: none;
+  animation: none;
+}`;
+/** "Thinking…", "Processing payment…": a light band sweeps across the words. Static text under reduced motion. */
+function ShimmerText({ children, label, duration, className, style, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		role: "status",
+		"data-slot": "shimmer-text",
+		className,
+		style: {
+			...durationVar(duration),
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(TextLoaderStyle, {
+				name: "shimmer-text",
+				css: SHIMMER,
+				reduced: STATIC_SHIMMER
+			}),
+			/* @__PURE__ */ jsx(StatusLabel, { children: label ?? children }),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-loader": "shimmer-text",
+				className: "nsaa-loader-shimmer-text",
+				style: { "--nsaa-loader-chars": children.length },
+				children
+			})
+		]
+	});
+}
+const WAVE = `
+.nsaa-loader-shimmer-wave > span {
+  display: inline-block;
+  white-space: pre;
+  opacity: 0.55;
+  animation: nsaa-loader-shimmer-wave ${textDuration("shimmer-wave")} ease-in-out infinite;
+  animation-delay: calc(${textDuration("shimmer-wave")} * var(--nsaa-loader-i) / var(--nsaa-loader-count));
+  animation-play-state: ${PLAY_STATE};
+}
+@keyframes nsaa-loader-shimmer-wave {
+  0%, 60%, 100% { opacity: 0.55; transform: none; }
+  30% { opacity: 1; transform: translateY(-2px) scale(1.1); }
+}`;
+const STATIC_WAVE = `
+.nsaa-loader-shimmer-wave > span {
+  opacity: 1;
+  animation: none;
+}`;
+/** Longer AI status lines: each letter lifts and brightens in turn. Static text under reduced motion. */
+function ShimmerWave({ children, label, duration, className, style, ...props }) {
+	const letters = typeof Intl !== "undefined" && "Segmenter" in Intl ? [...new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(children)].map((s) => s.segment) : [...children];
+	return /* @__PURE__ */ jsxs("span", {
+		role: "status",
+		"data-slot": "shimmer-wave",
+		className,
+		style: {
+			...durationVar(duration),
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(TextLoaderStyle, {
+				name: "shimmer-wave",
+				css: WAVE,
+				reduced: STATIC_WAVE
+			}),
+			/* @__PURE__ */ jsx(StatusLabel, { children: label ?? children }),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-loader": "shimmer-wave",
+				className: "nsaa-loader-shimmer-wave",
+				style: { "--nsaa-loader-count": letters.length },
+				children: letters.map((letter, i) => /* @__PURE__ */ jsx("span", {
+					style: { "--nsaa-loader-i": i },
+					children: letter
+				}, i))
+			})
+		]
+	});
+}
+const DOTS = `
+.nsaa-loader-text-dots > span {
+  animation: nsaa-loader-text-dots ${textDuration("text-dots")} infinite;
+  animation-delay: calc(${textDuration("text-dots")} / 7 * (var(--nsaa-loader-i) + 1));
+  animation-play-state: ${PLAY_STATE};
+}
+@keyframes nsaa-loader-text-dots {
+  0%, 100% { opacity: 0; }
+  50% { opacity: 1; }
+}`;
+const STATIC_DOTS = `
+.nsaa-loader-text-dots > span {
+  opacity: 1;
+  animation: none;
+}`;
+/** "Loading…" with dots that step in. A static "…" under reduced motion. */
+function TextDots({ children, dots = 3, duration, className, style, ...props }) {
+	const count = Number.isFinite(dots) ? Math.max(1, Math.floor(dots)) : 3;
+	return /* @__PURE__ */ jsxs("span", {
+		role: "status",
+		"data-slot": "text-dots",
+		className: cn("inline-flex items-baseline", className),
+		style: {
+			...durationVar(duration),
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(TextLoaderStyle, {
+				name: "text-dots",
+				css: DOTS,
+				reduced: STATIC_DOTS
+			}),
+			/* @__PURE__ */ jsx("span", { children }),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-loader": "text-dots",
+				className: "nsaa-loader-text-dots inline-flex",
+				children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx("span", {
+					style: { "--nsaa-loader-i": i },
+					children: "."
+				}, i))
+			})
+		]
+	});
+}
+const TYPING = `
+.nsaa-loader-typing {
+  display: inline-flex;
+  align-items: center;
+  gap: 12%;
+  width: calc(var(--nsaa-loader-size, var(--nsaa-loader-size-md)) * 2);
+  height: var(--nsaa-loader-size, var(--nsaa-loader-size-md));
+}
+.nsaa-loader-typing > span {
+  flex: 1;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.5;
+  animation: nsaa-loader-typing ${textDuration("typing")} infinite;
+  animation-delay: calc(${textDuration("typing")} * 0.16 * var(--nsaa-loader-i));
+  animation-play-state: ${PLAY_STATE};
+}
+@keyframes nsaa-loader-typing {
+  0%, 100% { transform: translateY(0); opacity: 0.5; }
+  50% { transform: translateY(-50%); opacity: 1; }
+}`;
+const STATIC_TYPING = `
+.nsaa-loader-typing > span {
+  opacity: 1;
+  animation: none;
+}`;
+/** A chat "is typing" bubble: three dots bob in turn. Three static dots under reduced motion. */
+function Typing({ dots = 3, label = "Typing", duration, className, style, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		role: "status",
+		"data-slot": "typing",
+		className,
+		style: {
+			...durationVar(duration),
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(TextLoaderStyle, {
+				name: "typing",
+				css: TYPING,
+				reduced: STATIC_TYPING
+			}),
+			/* @__PURE__ */ jsx(StatusLabel, { children: label }),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-loader": "typing",
+				className: "nsaa-loader-typing",
+				children: Array.from({ length: dots }, (_, i) => /* @__PURE__ */ jsx("span", { style: { "--nsaa-loader-i": i } }, i))
+			})
+		]
+	});
+}
+const ANALYZING = `
+.nsaa-loader-analyzing-image {
+  position: relative;
+  isolation: isolate;
+  display: inline-block;
+  width: calc(var(--nsaa-loader-size, var(--nsaa-loader-size-xl)) * 2);
+  aspect-ratio: 1;
+}
+.nsaa-loader-analyzing-image > * {
+  position: absolute;
+  inset: 0;
+}
+.nsaa-loader-analyzing-image-cover {
+  background: var(--nsaa-loader-background, var(--nsaa-color-page));
+  transform-origin: left center;
+  animation: nsaa-loader-analyzing-cover ${textDuration("analyzing-image")} var(--nsaa-ease-out) infinite alternate;
+  animation-play-state: ${PLAY_STATE};
+}
+.nsaa-loader-analyzing-image-scan {
+  inset: 0 auto 0 0;
+  width: 7%;
+  border-radius: calc(infinity * 1px);
+  background: currentColor;
+  animation: nsaa-loader-analyzing-scan ${textDuration("analyzing-image")} var(--nsaa-ease-out) infinite alternate;
+  animation-play-state: ${PLAY_STATE};
+}
+@keyframes nsaa-loader-analyzing-cover {
+  0% { transform: scaleX(1); }
+  60%, 100% { transform: scaleX(0); }
+}
+@keyframes nsaa-loader-analyzing-scan {
+  0% { transform: translateX(1400%); }
+  60%, 100% { transform: translateX(-80%); }
+}`;
+const STATIC_ANALYZING = `
+.nsaa-loader-analyzing-image-cover {
+  animation: none;
+  transform: none;
+}
+.nsaa-loader-analyzing-image-scan {
+  display: none;
+}`;
+const FRAME = "M6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V7.8C22 6.11984 22 5.27976 21.673 4.63803C21.3854 4.07354 20.9265 3.6146 20.362 3.32698C19.7202 3 18.8802 3 17.2 3H6.8C5.11984 3 4.27976 3 3.63803 3.32698C3.07354 3.6146 2.6146 4.07354 2.32698 4.63803C2 5.27976 2 6.11984 2 7.8V16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21Z";
+const PICTURE = "M4.27209 20.7279L10.8686 14.1314C11.2646 13.7354 11.4627 13.5373 11.691 13.4632C11.8918 13.3979 12.1082 13.3979 12.309 13.4632C12.5373 13.5373 12.7354 13.7354 13.1314 14.1314L19.6839 20.6839M14 15L16.8686 12.1314C17.2646 11.7354 17.4627 11.5373 17.691 11.4632C17.8918 11.3979 18.1082 11.3979 18.309 11.4632C18.5373 11.5373 18.7354 11.7354 19.1314 12.1314L22 15M10 9C10 10.1046 9.10457 11 8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9Z";
+const NOISE = [
+	[
+		6,
+		19,
+		1,
+		1
+	],
+	[
+		7,
+		18,
+		1,
+		1
+	],
+	[
+		7,
+		19,
+		3,
+		1
+	],
+	[
+		9,
+		18,
+		1,
+		1
+	],
+	[
+		14,
+		19,
+		3,
+		1
+	],
+	[
+		15,
+		18,
+		1,
+		1
+	],
+	[
+		5,
+		18,
+		2,
+		1
+	],
+	[
+		5,
+		17,
+		1,
+		1
+	],
+	[
+		10,
+		19,
+		1,
+		1
+	],
+	[
+		7,
+		17,
+		1,
+		1
+	],
+	[
+		11,
+		19,
+		1,
+		1
+	],
+	[
+		10,
+		18,
+		1,
+		1
+	],
+	[
+		17,
+		19,
+		1,
+		1
+	],
+	[
+		15,
+		4,
+		2,
+		1
+	],
+	[
+		3,
+		9,
+		1,
+		3
+	],
+	[
+		4,
+		10,
+		1,
+		2
+	],
+	[
+		6,
+		9,
+		1,
+		1
+	],
+	[
+		15,
+		5,
+		1,
+		1
+	],
+	[
+		20,
+		8,
+		1,
+		3
+	],
+	[
+		19,
+		9,
+		1,
+		1
+	],
+	[
+		7,
+		13,
+		1,
+		1
+	],
+	[
+		9,
+		11,
+		1,
+		1
+	],
+	[
+		16,
+		12,
+		1,
+		2
+	],
+	[
+		13,
+		14,
+		1,
+		1
+	],
+	[
+		12,
+		11,
+		1,
+		1
+	],
+	[
+		10,
+		9,
+		1,
+		1
+	],
+	[
+		10,
+		15,
+		1,
+		1
+	],
+	[
+		10,
+		13,
+		1,
+		1
+	],
+	[
+		15,
+		9,
+		1,
+		1
+	],
+	[
+		13,
+		10,
+		1,
+		1
+	],
+	[
+		12,
+		14,
+		1,
+		1
+	],
+	[
+		5,
+		4,
+		3,
+		1
+	],
+	[
+		6,
+		5,
+		1,
+		1
+	],
+	[
+		7,
+		14,
+		1,
+		2
+	],
+	[
+		6,
+		14,
+		3,
+		1
+	],
+	[
+		16,
+		8,
+		1,
+		1
+	],
+	[
+		8,
+		9,
+		1,
+		1
+	],
+	[
+		20,
+		16,
+		1,
+		1
+	],
+	[
+		12,
+		12,
+		1,
+		1
+	],
+	[
+		8,
+		8,
+		1,
+		1
+	],
+	[
+		14,
+		12,
+		1,
+		1
+	],
+	[
+		17,
+		16,
+		2,
+		1
+	],
+	[
+		14,
+		17,
+		1,
+		1
+	],
+	[
+		11,
+		5,
+		3,
+		1
+	],
+	[
+		12,
+		4,
+		1,
+		1
+	],
+	[
+		12,
+		7,
+		1,
+		1
+	],
+	[
+		7,
+		11,
+		1,
+		1
+	],
+	[
+		15,
+		15,
+		1,
+		1
+	],
+	[
+		11,
+		11,
+		1,
+		1
+	],
+	[
+		13,
+		9,
+		1,
+		1
+	],
+	[
+		12,
+		15,
+		1,
+		1
+	],
+	[
+		9,
+		12,
+		2,
+		1
+	],
+	[
+		19,
+		13,
+		2,
+		1
+	],
+	[
+		9,
+		6,
+		1,
+		1
+	],
+	[
+		20,
+		4,
+		1,
+		1
+	],
+	[
+		19,
+		4,
+		1,
+		1
+	],
+	[
+		3,
+		15,
+		1,
+		2
+	],
+	[
+		3,
+		19,
+		1,
+		1
+	]
+];
+/** An image upload or scan: the picture dissolves into pixels behind a scan line. A static picture under reduced motion. */
+function AnalyzingImage({ label = "Analyzing image", duration, className, style, ...props }) {
+	const stroke = {
+		stroke: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		role: "status",
+		"data-slot": "analyzing-image",
+		className: cn("inline-block", className),
+		style: {
+			...durationVar(duration),
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(TextLoaderStyle, {
+				name: "analyzing-image",
+				css: ANALYZING,
+				reduced: STATIC_ANALYZING
+			}),
+			/* @__PURE__ */ jsx(StatusLabel, { children: label }),
+			/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				"data-loader": "analyzing-image",
+				className: "nsaa-loader-analyzing-image",
+				children: [
+					/* @__PURE__ */ jsxs("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ jsx("path", {
+							d: FRAME,
+							...stroke
+						}), NOISE.map(([x, y, width, height]) => /* @__PURE__ */ jsx("rect", {
+							x,
+							y,
+							width,
+							height,
+							fill: "currentColor"
+						}, `${x}-${y}`))]
+					}),
+					/* @__PURE__ */ jsx("span", { className: "nsaa-loader-analyzing-image-cover" }),
+					/* @__PURE__ */ jsxs("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ jsx("path", {
+							d: FRAME,
+							...stroke
+						}), /* @__PURE__ */ jsx("path", {
+							d: PICTURE,
+							...stroke,
+							className: "nsaa-loader-analyzing-image-picture"
+						})]
+					}),
+					/* @__PURE__ */ jsx("span", { className: "nsaa-loader-analyzing-image-scan" })
+				]
+			})
+		]
+	});
+}
+const TERMINAL = `
+.nsaa-loader-terminal-cursor {
+  display: inline-block;
+  width: 0.5em;
+  height: 1em;
+  background: currentColor;
+  animation: nsaa-loader-terminal ${textDuration("terminal")} step-end infinite;
+  animation-play-state: ${PLAY_STATE};
+}
+@keyframes nsaa-loader-terminal {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}`;
+const STATIC_TERMINAL = `
+.nsaa-loader-terminal-cursor {
+  animation: none;
+}`;
+/** CLI or log-style progress: a prompt, the last line and a blinking cursor. Static under reduced motion. */
+function Terminal({ prompt = ">", children, label = "Loading", duration, className, style, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		role: "status",
+		"data-slot": "terminal",
+		className: cn("inline-flex items-center gap-[0.25em] font-mono", className),
+		style: {
+			...durationVar(duration),
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(TextLoaderStyle, {
+				name: "terminal",
+				css: TERMINAL,
+				reduced: STATIC_TERMINAL
+			}),
+			/* @__PURE__ */ jsx(StatusLabel, { children: label }),
+			/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				"data-loader": "terminal",
+				className: "inline-flex items-center gap-[0.25em]",
+				children: [
+					/* @__PURE__ */ jsx("span", { children: prompt }),
+					children !== void 0 && /* @__PURE__ */ jsx("span", { children }),
+					/* @__PURE__ */ jsx("span", { className: "nsaa-loader-terminal-cursor" })
+				]
+			})
+		]
+	});
+}
+export { AnalyzingImage, ShimmerText, ShimmerWave, Terminal, TextDots, Typing };

package/dist/loaders/trace.d.ts

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