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

package/dist/loaders/trace.js

@@ -0,0 +1,46 @@
+"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/trace.tsx
+const VIEW = 20;
+const SIDE = 17.5;
+const RADIUS = 4;
+const PERIMETER = 38 + 2 * Math.PI * RADIUS;
+const DASH = 16;
+const RECT = {
+	height: SIDE,
+	rx: RADIUS,
+	width: SIDE,
+	x: 2.5 / 2,
+	y: 2.5 / 2
+};
+const css = `
+${rotationCss("trace", `to {
+    stroke-dashoffset: ${-PERIMETER};
+  }`)}
+`;
+function Trace({ cap, easing, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "trace",
+		children: css
+	}), /* @__PURE__ */ jsxs("svg", {
+		...spinnerRoot("trace", rest),
+		fill: "none",
+		role: "presentation",
+		stroke: "currentColor",
+		strokeWidth: "2.5",
+		viewBox: `0 0 ${VIEW} ${VIEW}`,
+		children: [/* @__PURE__ */ jsx("rect", {
+			...RECT,
+			opacity: "0.2"
+		}), /* @__PURE__ */ jsx("rect", {
+			...RECT,
+			className: spinClass("trace", easing),
+			strokeDasharray: `${DASH} ${PERIMETER - DASH}`,
+			strokeLinecap: linecap(cap)
+		})]
+	})] });
+}
+export { Trace };

package/dist/loaders/types.d.ts

@@ -0,0 +1,10 @@
+
+export interface SpinnerProps {
+  className?: string;
+  color?: string;
+  duration?: number;
+  playState?: "paused" | "running";
+  /** A token size (xs 12, sm 14, md 16, lg 20, xl 24) or pixels. Unset: inherited, else md. */
+  size?: LoaderSize | number;
+}
+export type LoaderSize = "xs" | "sm" | "md" | "lg" | "xl";

package/dist/loaders/wave.d.ts

@@ -0,0 +1,8 @@
+
+import { SpinnerProps } from "./types.js";
+export type WaveOrigin = "bottom" | "center";
+export declare const DEFAULT_WAVE_ORIGIN: WaveOrigin;
+export interface WaveProps extends SpinnerProps {
+  origin?: WaveOrigin;
+}
+export declare function Wave({ origin, ...rest }: WaveProps): import("react").JSX.Element;

package/dist/loaders/wave.js

@@ -0,0 +1,59 @@
+"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/wave.tsx
+const DEFAULT_WAVE_ORIGIN = "center";
+const BARS = Array.from({ length: 5 }, (_, index) => index);
+const css = `
+.nsaa-loader-wave {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nsaa-loader-wave-bar {
+  width: calc(${SIZE} * 0.12);
+  height: 100%;
+  background: currentColor;
+  border-radius: 9999px;
+  transform-origin: center;
+  ${animation("wave", "nsaa-loader-wave-rise", "ease-in-out")}
+  animation-delay: ${stagger("wave", BARS.length)};
+}
+
+.nsaa-loader-wave-bar-bottom {
+  align-self: flex-end;
+  transform-origin: bottom;
+}
+
+/* Nsaa (#113): scaleY instead of upstream's height, so the bars don't re-lay out every frame. */
+@keyframes nsaa-loader-wave-rise {
+  0%,
+  100% {
+    transform: scaleY(0.3);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+}
+
+${reducedMotion(`
+  .nsaa-loader-wave-bar {
+    transform: scaleY(calc(0.4 + var(${STEP_VAR}) * 0.15));
+  }
+`)}
+`;
+function Wave({ origin = DEFAULT_WAVE_ORIGIN, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "wave",
+		children: css
+	}), /* @__PURE__ */ jsx("div", {
+		...spinnerRoot("wave", rest),
+		children: BARS.map((index) => /* @__PURE__ */ jsx("div", {
+			className: `nsaa-loader-wave-bar nsaa-loader-wave-bar-${origin}`,
+			style: step(index)
+		}, index))
+	})] });
+}
+export { DEFAULT_WAVE_ORIGIN, Wave };

package/dist/loaders-text.d.ts

@@ -1,48 +1,3 @@
 
-import * as React from "react";
-interface TextLoaderBase extends Omit<React.ComponentProps<"span">, "children"> {
-  /** One cycle, ms. Default: the loader's token (an ancestor's speed cascades). */
-  duration?: number | undefined;
-}
-interface ShimmerTextProps extends TextLoaderBase {
-  children: string;
-  /** Announced instead of the text, if different. */
-  label?: string | undefined;
-}
-/** "Thinking…", "Processing payment…": a light band sweeps across the words. Static text under reduced motion. */
-export declare function ShimmerText({ children, label, duration, className, style, ...props }: ShimmerTextProps): React.JSX.Element;
-interface ShimmerWaveProps extends TextLoaderBase {
-  children: string;
-  label?: string | undefined;
-}
-/** Longer AI status lines: each letter lifts and brightens in turn. Static text under reduced motion. */
-export declare function ShimmerWave({ children, label, duration, className, style, ...props }: ShimmerWaveProps): React.JSX.Element;
-interface TextDotsProps extends TextLoaderBase {
-  children: React.ReactNode;
-  dots?: number | undefined;
-}
-/** "Loading…" with dots that step in. A static "…" under reduced motion. */
-export declare function TextDots({ children, dots, duration, className, style, ...props }: TextDotsProps): React.JSX.Element;
-interface TypingProps extends TextLoaderBase {
-  dots?: number | undefined;
-  /** Announced, e.g. "Ama is typing". Default "Typing". */
-  label?: string | undefined;
-}
-/** A chat "is typing" bubble: three dots bob in turn. Three static dots under reduced motion. */
-export declare function Typing({ dots, label, duration, className, style, ...props }: TypingProps): React.JSX.Element;
-interface AnalyzingImageProps extends TextLoaderBase {
-  /** Default "Analyzing image". */
-  label?: string | undefined;
-}
-/** An image upload or scan: the picture dissolves into pixels behind a scan line. A static picture under reduced motion. */
-export declare function AnalyzingImage({ label, duration, className, style, ...props }: AnalyzingImageProps): React.JSX.Element;
-interface TerminalProps extends TextLoaderBase {
-  prompt?: string | undefined;
-  /** The last line of output, shown after the prompt. */
-  children?: React.ReactNode;
-  /** Announced. Default "Loading". */
-  label?: string | undefined;
-}
-/** CLI or log-style progress: a prompt, the last line and a blinking cursor. Static under reduced motion. */
-export declare function Terminal({ prompt, children, label, duration, className, style, ...props }: TerminalProps): React.JSX.Element;
-export type { AnalyzingImageProps, ShimmerTextProps, ShimmerWaveProps, TerminalProps, TextDotsProps, TypingProps };
+import { AnalyzingImage, AnalyzingImageProps, ShimmerText, ShimmerTextProps, ShimmerWave, ShimmerWaveProps, Terminal, TerminalProps, TextDots, TextDotsProps, Typing, TypingProps } from "./loaders/text/text-loaders.js";
+export { AnalyzingImage, type AnalyzingImageProps, ShimmerText, type ShimmerTextProps, ShimmerWave, type ShimmerWaveProps, Terminal, type TerminalProps, TextDots, type TextDotsProps, Typing, type TypingProps };