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

package/src/styles.css

@@ -3,139 +3,9 @@
  *   @import "tailwindcss";
  *   @import "@nsaa/core/styles.css";
  */
-@import "@nsaa/tokens/css";
 
-/* The feel layer (#108): motion for the base-nova components, keyed to data-slot. */
-@import "./feel.css";
+@import "./styles-base.css";
 
-/* Let Tailwind see the class names used by the built components. */
+/* Let Tailwind see the class names used by every built component. For less CSS, import
+   styles-base.css and the sources of the components you use instead (see that file). */
 @source "../dist";
-
-/* `dark:` follows the mode axis (`.dark` or `data-mode="dark"` on an ancestor), not the OS, so the
-   shadcn classes (#84) switch with the rest of the tokens. The nearest mode wins (#120): a light
-   panel inside a dark page is light, and a dark panel inside that light panel is dark again. */
-@custom-variant dark (
-  &:where(
-    .dark,
-    [data-mode="dark"],
-    :is(.dark, [data-mode="dark"]) *:not([data-mode="light"], [data-mode="light"] *),
-    [data-mode="light"] [data-mode="dark"] *
-  )
-);
-
-/* shadcn's base layer (apps/v4 globals.css, `* { @apply border-border }`): a bare `border` class takes
-   the border token, not currentColor. Dialog's footer and the Drawer's edge rely on it (#84). */
-@layer base {
-  *,
-  ::after,
-  ::before {
-    border-color: var(--border);
-  }
-}
-
-/* shadcn's orientation variants (shadcn/tailwind.css, which the shadcn CLI imports for its users).
-   Base UI sets `data-orientation`, not `data-horizontal`; Tabs, Separator and Field use these (#84).
-   shadcn's other data-* variants match Base UI's attributes as Tailwind's defaults already. */
-@custom-variant data-horizontal {
-  &:where([data-orientation="horizontal"]) {
-    @slot;
-  }
-}
-
-@custom-variant data-vertical {
-  &:where([data-orientation="vertical"]) {
-    @slot;
-  }
-}
-
-/* shadcn's `data-selected` (same file): only `data-selected="true"`. cmdk writes "true" / "false", so
-   Tailwind's default (attribute present) would highlight every Command item (#84). */
-@custom-variant data-selected {
-  &:where([data-selected="true"]) {
-    @slot;
-  }
-}
-
-/* shadcn style hooks: `cn-rtl-flip` marks icons the shadcn CLI mirrors for right-to-left (the submenu
-   chevrons); `cn-input-otp` and two `cn-calendar-*` classes are styled by base-nova's style sheet, not
-   by the item's classes. */
-@layer components {
-  .cn-rtl-flip:where(:dir(rtl)) {
-    rotate: 180deg;
-  }
-
-  /* Input OTP's root: shadcn's style-nova.css gives `cn-input-otp` a `gap-2` between the groups. */
-  .cn-input-otp {
-    gap: calc(var(--spacing) * 2);
-  }
-
-  /* Calendar with captionLayout="dropdown" (#136): style-nova.css draws the month and year
-     dropdowns' border and focus ring, and pads the caption label; the item's classes don't. */
-  .cn-calendar-dropdown-root {
-    border: 1px solid var(--input);
-
-    &:has(:focus) {
-      border-color: var(--ring);
-      box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
-    }
-  }
-
-  .cn-calendar-caption-label {
-    height: calc(var(--spacing) * 6);
-    padding-right: calc(var(--spacing) * 1);
-    padding-left: calc(var(--spacing) * 1.5);
-  }
-}
-
-/* Hover only where hovering is real (fine pointers), never on disabled, busy or read-only controls. */
-@custom-variant hover-fine {
-  @media (hover: hover) and (pointer: fine) {
-    &:hover:not([data-disabled], [data-loading], [data-readonly]) {
-      @slot;
-    }
-  }
-}
-
-/* Pressed look, never on disabled or busy controls. */
-@custom-variant pressed {
-  &:active:not([data-disabled], [data-loading]) {
-    @slot;
-  }
-}
-
-/* shadcn's `no-scrollbar` (apps/v4 globals.css), used by the Combobox list (#84). `cn-menu-target`
-   and `cn-menu-translucent` on Select and Combobox popups are inert markers the shadcn CLI keeps for
-   its optional translucent-menu setting; nothing styles them by default, so neither do we. */
-@utility no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-/* Input OTP's fake caret (`animate-caret-blink`, #84). shadcn's apps/v4 globals.css defines it; the
-   base-nova registry item doesn't ship it, so core does (and the `input-otp` registry item adds it).
-   One blink is `duration.caret` (1.25 s, as shadcn's; #125). Under reduced motion the caret stays solid. */
-@theme {
-  --animate-caret-blink: caret-blink var(--nsaa-duration-caret) ease-out infinite;
-
-  @keyframes caret-blink {
-    0%,
-    70%,
-    100% {
-      opacity: 1;
-    }
-    20%,
-    50% {
-      opacity: 0;
-    }
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animate-caret-blink {
-    animation: none;
-  }
-}

package/dist/registry-2PyPW9Xw.js

@@ -1,390 +0,0 @@
-"use client";
-import { a as spinnerRoot, d as STEP_VAR, f as animation, i as reducedMotion, l as SIZE, n as SpinnerStyle, o as step, p as stagger } from "./frame-CK9IBOZB.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-// src/loaders/cap.ts
-const DEFAULT_CAP = "round";
-function linecap(cap = DEFAULT_CAP) {
-	return cap === "flat" ? "butt" : "round";
-}
-// 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}
-}
-`;
-}
-// src/loaders/arc.tsx
-const css$7 = `
-${rotationCss("arc")}
-`;
-function Arc({ cap, easing, ...rest }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
-		name: "arc",
-		children: css$7
-	}), /* @__PURE__ */ jsx("svg", {
-		...spinnerRoot("arc", rest),
-		fill: "none",
-		role: "presentation",
-		viewBox: "0 0 24 24",
-		children: /* @__PURE__ */ jsx("circle", {
-			className: spinClass("arc", easing),
-			cx: "12",
-			cy: "12",
-			r: "10",
-			stroke: "currentColor",
-			strokeDasharray: "18 44.8",
-			strokeLinecap: linecap(cap),
-			strokeWidth: "2.5"
-		})
-	})] });
-}
-// src/loaders/bouncing-dots.tsx
-const DOTS$1 = Array.from({ length: 3 }, (_, index) => index);
-const css$6 = `
-.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$1.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$6
-	}), /* @__PURE__ */ jsx("div", {
-		...spinnerRoot("bouncing-dots", props),
-		children: DOTS$1.map((dot) => /* @__PURE__ */ jsx("div", {
-			className: "nsaa-loader-bouncing-dots-dot",
-			style: step(dot)
-		}, dot))
-	})] });
-}
-// 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};
-  }
-`)}
-`;
-}
-// 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$5 = `
-${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$5
-	}), /* @__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}`))
-	})] });
-}
-// src/loaders/classic.tsx
-const BARS$1 = Array.from({ length: 12 }, (_, index) => index);
-const css$4 = `
-.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$1.length, {
-	dim: .15,
-	rest: .5
-})}
-`;
-function Classic(props) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
-		name: "classic",
-		children: css$4
-	}), /* @__PURE__ */ jsx("div", {
-		...spinnerRoot("classic", props),
-		children: /* @__PURE__ */ jsx("div", {
-			className: "nsaa-loader-classic-inner",
-			children: BARS$1.map((bar) => /* @__PURE__ */ jsx("div", {
-				className: "nsaa-loader-classic-bar",
-				style: step(bar)
-			}, bar))
-		})
-	})] });
-}
-// src/loaders/orbit.tsx
-const css$3 = `
-.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$3
-	}), /* @__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)}` })]
-	})] });
-}
-// src/loaders/pulse.tsx
-const css$2 = `
-.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$2
-	}), /* @__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"
-		})]
-	})] });
-}
-// src/loaders/ring.tsx
-const css$1 = `
-${rotationCss("ring")}
-`;
-function Ring({ cap, easing, ...rest }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
-		name: "ring",
-		children: css$1
-	}), /* @__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"
-		})]
-	})] });
-}
-// 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))
-	})] });
-}
-// src/spinner/registry.ts
-const registry = /* @__PURE__ */ new Map();
-/** Makes a loader available as `<Spinner variant={name} />`. A later registration replaces an earlier one. */
-function registerLoader(name, component) {
-	registry.set(name, component);
-}
-/** Registers a map of loaders, e.g. `registerLoaders(LOADERS)` for all 29 from `@nsaa/core/loaders`. */
-function registerLoaders(loaders) {
-	for (const [name, component] of Object.entries(loaders)) registry.set(name, component);
-}
-function getLoader(name) {
-	return registry.get(name);
-}
-export { DEFAULT_CAP as _, Wave as a, Orbit as c, fadeCss as d, BouncingDots as f, spinClass as g, rotationCss as h, DEFAULT_WAVE_ORIGIN as i, Classic as l, DEFAULT_EASING as m, registerLoader as n, Ring as o, Arc as p, registerLoaders as r, Pulse as s, getLoader as t, CircularDots as u, linecap as v };

package/dist/registry-DjfWNw3R.d.ts

@@ -1,18 +0,0 @@
-
-import { ComponentType } from "react";
-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;
-}
-type LoaderSize = "xs" | "sm" | "md" | "lg" | "xl";
-/** A loader: a decorative, `aria-hidden` glyph painted with `currentColor` (the loader contract). */
-type LoaderComponent = ComponentType<SpinnerProps>;
-/** Makes a loader available as `<Spinner variant={name} />`. A later registration replaces an earlier one. */
-declare function registerLoader(name: string, component: LoaderComponent): void;
-/** Registers a map of loaders, e.g. `registerLoaders(LOADERS)` for all 29 from `@nsaa/core/loaders`. */
-declare function registerLoaders(loaders: Record<string, LoaderComponent>): void;
-export { SpinnerProps as a, LoaderSize as i, registerLoader as n, registerLoaders as r, LoaderComponent as t };

package/dist/sound-DiYNAnR_.d.ts

@@ -1,61 +0,0 @@
-
-import { ReactNode } from "react";
-declare const sound: {
-  readonly $note: "On by default (decision #30): plays only after a user action, never on load; quiet; one remembered global mute; silent under prefers-reduced-motion; apps can turn the default off. Cue values are UISFX 0.4.0 cue names (MIT code, CC0 audio), checked against its CUES export; feel is a UISFX pack name (decision #57).";
-  readonly enabled: true;
-  readonly volume: 0.35;
-  readonly feel: "zen";
-  readonly library: "uisfx";
-  readonly libraryVersion: "0.4.0";
-  readonly cue: {
-    readonly "input.press": "press";
-    readonly "input.toggle-on": "toggle-on";
-    readonly "input.toggle-off": "toggle-off";
-    readonly "selection.select": "select";
-    readonly "navigation.open": "open";
-    readonly "navigation.close": "close";
-    readonly "movement.snap": "snap";
-    readonly "movement.drop": "drop";
-    readonly "feedback.success": "success";
-    readonly "feedback.warning": "warning";
-    readonly "feedback.error": "error";
-    readonly "commerce.payment": "purchase";
-    readonly "progress.loop": "loading";
-  };
-};
-/** Cue names come from the tokens (`sound.cue` in packages/tokens/src/effects.json). */
-type SoundCue = keyof typeof sound.cue;
-/**
- * Plays a cue. App-supplied, so the library makes no network calls and the sound engine
- * (UISFX or anything else) stays swappable. `asset` is the engine's cue name from the tokens.
- */
-type SoundPlayer = (cue: SoundCue, options: {
-  asset: string;
-  volume: number;
-}) => void | (() => void);
-interface PlayOptions {
-  /** Give way to any other cue played during the same event (a Button press under a Dialog close). */
-  yield?: boolean | undefined;
-}
-interface SoundProviderProps {
-  children: ReactNode;
-  /** Plays cues. Without one every cue is silent (the current stub behaviour). */
-  player?: SoundPlayer | undefined;
-  /** Apps can turn the default off (decision #30). */
-  enabled?: boolean | undefined;
-  volume?: number | undefined;
-}
-/** Global sound settings: one remembered mute for the whole app. */
-declare function SoundProvider({ children, player, enabled, volume }: SoundProviderProps): import("react").JSX.Element;
-/**
- * Plays interface sounds with manners: only from a user action (call `play` in an event handler),
- * never when muted, turned off, or when the user asks for reduced motion; repeats are throttled.
- */
-declare function useSound(): {
-  play: (cue: SoundCue, options?: PlayOptions) => void;
-  loop: (cue: SoundCue) => (() => void);
-  muted: boolean;
-  setMuted: (muted: boolean) => void;
-  enabled: boolean;
-};
-export { useSound as a, SoundProviderProps as i, SoundPlayer as n, SoundProvider as r, SoundCue as t };