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

package/dist/stat/stat.js

@@ -0,0 +1,161 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Skeleton } from "../skeleton/skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import * as React from "react";
+// src/stat/stat.tsx
+const StatContext = React.createContext({
+	loading: false,
+	size: "default"
+});
+/** While loading, a part keeps its own line box and shows a Skeleton in it, so the tile does not
+change height when the data arrives. */
+function Slot({ width, height = "h-[1lh]", children }) {
+	const { loading } = React.useContext(StatContext);
+	return loading ? /* @__PURE__ */ jsx(Skeleton, { className: cn("inline-block align-top", height, width) }) : children;
+}
+function Stat({ className, size = "default", variant = "card", loading = false, children, ...props }) {
+	return /* @__PURE__ */ jsx(StatContext.Provider, {
+		value: {
+			loading,
+			size
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "stat",
+			"data-size": size,
+			"data-variant": variant,
+			"aria-busy": loading || void 0,
+			className: cn("group/stat @container/stat relative flex min-w-0 flex-col gap-1 text-sm text-card-foreground", variant === "card" && "rounded-xl bg-card ring-1 ring-foreground/10", variant === "card" && (size === "sm" ? "p-3" : "p-4"), className),
+			...props,
+			children
+		})
+	});
+}
+function StatLabel({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "stat-label",
+		className: cn("pe-8 font-medium text-muted-foreground", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Slot, {
+			width: "w-24",
+			children
+		})
+	});
+}
+/** Tabular figures; a long value drops one type step in a narrow tile instead of truncating. */
+function StatValue({ className, children, ...props }) {
+	const { size } = React.useContext(StatContext);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "stat-value",
+		className: cn("font-semibold tracking-tight tabular-nums", size === "sm" ? "text-xl @max-[12rem]/stat:text-lg" : "text-2xl @max-[14rem]/stat:text-xl", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Slot, {
+			width: "w-32",
+			children
+		})
+	});
+}
+const ARROW = {
+	up: "M12 19V5m-6 6 6-6 6 6",
+	down: "M12 5v14m6-6-6 6-6-6",
+	flat: "M5 12h14"
+};
+const TONE = {
+	positive: "bg-positive-subtle text-on-positive-subtle-foreground",
+	negative: "bg-danger-subtle text-on-danger-subtle-foreground",
+	neutral: "bg-muted text-muted-foreground"
+};
+function StatChange({ className, direction, tone, value, label, labels, ...props }) {
+	const resolved = tone ?? (direction === "up" ? "positive" : direction === "down" ? "negative" : "neutral");
+	const words = {
+		up: "up",
+		down: "down",
+		flat: "unchanged",
+		...labels
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "stat-change",
+		"data-direction": direction,
+		"data-tone": resolved,
+		className: cn("flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs", className),
+		...props,
+		children: /* @__PURE__ */ jsxs(Slot, {
+			width: "w-28",
+			height: "h-5",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: cn("inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 font-medium tabular-nums", TONE[resolved]),
+				children: [
+					/* @__PURE__ */ jsx("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						"aria-hidden": "true",
+						className: "size-3",
+						children: /* @__PURE__ */ jsx("path", { d: ARROW[direction] })
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "sr-only",
+						children: [words[direction], " "]
+					}),
+					value
+				]
+			}), label && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: label
+			})]
+		})
+	});
+}
+function StatDescription({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "stat-description",
+		className: cn("text-muted-foreground", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Slot, {
+			width: "w-40",
+			children
+		})
+	});
+}
+function StatIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "stat-icon",
+		"aria-hidden": "true",
+		className: cn("absolute end-4 top-4 text-muted-foreground group-data-[size=sm]/stat:end-3 group-data-[size=sm]/stat:top-3 [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+/** A link or button at the foot of the tile. Pass `render={<a href="…" />}` for a link. */
+function StatAction({ className, render, cover = false, ...props }) {
+	const { loading } = React.useContext(StatContext);
+	const element = useRender({
+		defaultTagName: "button",
+		props: mergeProps({ className: cn("mt-1 w-fit rounded-sm text-sm font-medium underline-offset-4 outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/50", cover && "after:absolute after:inset-0 after:rounded-xl", className) }, render ? props : {
+			type: "button",
+			...props
+		}),
+		render,
+		state: { slot: "stat-action" }
+	});
+	if (loading) return /* @__PURE__ */ jsx(Skeleton, { className: "mt-1 h-[1lh] w-12 text-sm" });
+	return element;
+}
+/** Lays tiles out by its own width (1 to 4 columns), so a sidebar never breaks the grid. */
+function StatGroup({ className, dividers = false, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "stat-group",
+		className: cn("@container/stat-group", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("grid grid-cols-1 @lg/stat-group:grid-cols-2 @3xl/stat-group:grid-cols-3 @5xl/stat-group:grid-cols-4", dividers ? "gap-px overflow-hidden rounded-xl bg-border ring-1 ring-foreground/10 *:data-[slot=stat]:bg-card *:data-[slot=stat]:p-4" : "gap-4"),
+			children
+		})
+	});
+}
+export { Stat, StatAction, StatChange, StatDescription, StatGroup, StatIcon, StatLabel, StatValue };

package/dist/tokens/dist/motion.js

@@ -36,6 +36,24 @@ const spring = {
 		"bounce": 0
 	}
 };
+const duration = {
+	"instant": 0,
+	"press": 150,
+	"tooltip": 125,
+	"tooltip-exit": 100,
+	"exit": 100,
+	"char": 120,
+	"fast": 150,
+	"base": 200,
+	"slow": 250,
+	"drawer": 300,
+	"chunk": 300,
+	"marketing": 400,
+	"marketing-slow": 500,
+	"spin": 800,
+	"caret": 1250,
+	"feedback-hold": 1500
+};
 const scale = {
 	"press": .97,
 	"enter": .95,
@@ -123,4 +141,4 @@ const sound = {
 		"progress.loop": "loading"
 	}
 };
-export { blur, loader, scale, sound, spring };
+export { blur, duration, loader, scale, sound, spring };

package/dist/toolbar/toolbar-item.js

@@ -3,8 +3,8 @@ import { cn } from "../lib/cn.js";
 import { useControlDefaults } from "../lib/control-defaults.js";
 import { Button } from "../button/button.js";
 import { Kbd } from "../kbd/kbd.js";
-import { ariaShortcut, formatShortcut } from "../lib/shortcut.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { ariaShortcut, formatShortcut } from "../lib/shortcut.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 // src/toolbar/toolbar-item.tsx

package/dist/toolbar/toolbar.js

@@ -2,14 +2,14 @@
 import { cn } from "../lib/cn.js";
 import { ControlDefaultsContext, useControlDefaults } from "../lib/control-defaults.js";
 import { buttonVariants } from "../button/button.js";
+import { mergeRefs } from "../lib/merge-refs.js";
 import { Input } from "../input/input.js";
 import { DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuShortcut } from "../dropdown-menu/dropdown-menu.js";
+import { TooltipProvider } from "../tooltip/tooltip.js";
 import { tv } from "../lib/tv.js";
 import { ariaShortcut, formatShortcut } from "../lib/shortcut.js";
-import { TooltipProvider } from "../tooltip/tooltip.js";
 import { ToolbarItem } from "./toolbar-item.js";
 import { OverflowContext, OverflowMore, OverflowStore, useOverflowUnit } from "./overflow.js";
-import { mergeRefs } from "../lib/merge-refs.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Toolbar } from "@base-ui/react/toolbar";

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@nsaa/core",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.5",
   "description": "Nsaa core components: accessible, token-driven, animated to the Nsaa feel spec.",
   "license": "MIT",
   "type": "module",
   "sideEffects": [
     "**/*.css",
+    "./dist/index.js",
+    "./src/index.ts",
     "./dist/lib/track-input-modality.js",
+    "./src/lib/track-input-modality.ts",
     "./dist/spinner/spinner.js"
   ],
   "files": [
@@ -50,7 +53,7 @@
     "tailwind-merge": "^3.7.0",
     "tailwind-variants": "^3.3.1",
     "uisfx": "0.4.0",
-    "@nsaa/tokens": "^0.1.0-alpha.3"
+    "@nsaa/tokens": "^0.1.0-alpha.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^7.0.1",

package/src/feel.css

@@ -19,6 +19,29 @@
  * own unlayered CSS still wins.
  */
 
+/* ------------------------------------------------------------------ controls set their text colour (#155)
+   shadcn leaves these inherited, so a page with a hard-coded text colour made Input and the outline
+   Button unreadable in dark mode (Corvta). Every form control, and every Button / Toggle variant that
+   paints a surface, takes its paired foreground at rest. Tailwind's components layer, below
+   utilities: a variant's own text-* class, hover and placeholder colours, and an app's className
+   still win. Ghost and link stay inherited by design (they sit on someone else's surface). */
+@layer components {
+  :is(
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="native-select"],
+    [data-slot="input-group"],
+    [data-slot="input-group-control"],
+    [data-slot="input-otp-slot"],
+    [data-slot="combobox-chips"],
+    [data-slot="button"][data-variant="outline"],
+    [data-slot="toggle-group"][data-variant="outline"]
+  ) {
+    color: var(--foreground);
+  }
+}
+
 /* ------------------------------------------------------------------ coarse-pointer hit areas (#144)
    DESIGN.md: 44 px targets on coarse pointers. An invisible ::before, centred, at least 44 × 44 and
    never smaller than the control; layout is unchanged. ::before because base-nova already uses
@@ -53,6 +76,17 @@
       }
     }
 
+    /* Alert links (#148): 44 px tall, their own width (the AlertLinks gap keeps them apart);
+       ::after, as ::before draws the separator. */
+    [data-slot="alert-link"]::after {
+      content: "";
+      position: absolute;
+      inset-inline: 0;
+      top: 50%;
+      height: calc(var(--spacing) * 11);
+      translate: 0 -50%;
+    }
+
     :is([data-slot="input"], [data-slot="input-group"]) {
       min-height: calc(var(--spacing) * 11);
     }
@@ -142,6 +176,25 @@
     }
   }
 
+  /* ---------------------------------------------------------------- Sidebar (#153)
+     Collapse and expand: shadcn's 200 ms linear -> duration.base, ease.inOut (an on-screen move).
+     base-nova animates the width and the container's left / right (layout exception, #153); the
+     rail's transition-all narrows to its translate and background. */
+  :is(
+    [data-slot="sidebar-gap"],
+    [data-slot="sidebar-container"],
+    [data-slot="sidebar-group-label"],
+    [data-slot="sidebar-menu-button"],
+    [data-slot="sidebar-rail"]
+  ) {
+    transition-duration: calc(var(--nsaa-duration-base) * var(--nsaa-time-scale));
+    transition-timing-function: var(--nsaa-ease-in-out);
+  }
+
+  [data-slot="sidebar-rail"] {
+    transition-property: translate, background-color;
+  }
+
   /* ---------------------------------------------------------------- Drawer
      shadcn's 450 ms → ease.drawer, drawer 300 in, base out; a swipe-dismiss releases on
      spring.sheet, scaled by Base UI's release strength. Stacking and swipe variables untouched. */
@@ -461,6 +514,13 @@
     }
   }
 
+  /* Dismiss (#148): opacity only, duration.fast, then it unmounts. No height animation (not a
+     named layout exception); instant under reduced motion and after keyboard input. */
+  [data-slot="alert"][data-ending-style] {
+    opacity: 0;
+    transition-duration: calc(var(--nsaa-duration-fast) * var(--nsaa-time-scale));
+  }
+
   /* ---------------------------------------------------------------- Avatar, Skeleton, Spinner
      A loaded image fades in 150; Skeleton keeps its pulse; Spinner turns at duration.spin. */
   /* SkeletonContent: what replaces a Skeleton fades in the same way (#128). */
@@ -474,6 +534,30 @@
     }
   }
 
+  /* ---------------------------------------------------------------- Progress and Meter (#153)
+     A Meter grows from its start once on first paint (scale, ease-out); later value changes ease
+     the width. Progress narrows shadcn's transition-all to the width. None under reduced motion. */
+  :is(
+    [data-slot="progress-indicator"],
+    [data-slot="meter-indicator"],
+    [data-slot="meter-segment"]
+  ) {
+    transition-property: width, flex-basis, scale;
+    transition-duration: calc(var(--nsaa-duration-chunk) * var(--nsaa-time-scale));
+    transition-timing-function: var(--nsaa-ease-out);
+    transform-origin: left center;
+
+    &:dir(rtl) {
+      transform-origin: right center;
+    }
+  }
+
+  :is([data-slot="meter-indicator"], [data-slot="meter-segment"]) {
+    @starting-style {
+      scale: 0 1;
+    }
+  }
+
   /* Spinner (Phase 5, #113): loaders bring their own keyframes; the "lucide" glyph turns at
      duration.spin and follows the cascading speed and play state like the loaders do. */
   /* Pausing: data-loader-paused on any ancestor (LoaderProvider paused, a Spinner offscreen or in a
@@ -601,6 +685,18 @@
         transition-duration: 0s;
       }
 
+      /* Sidebar: collapse and expand snap. */
+      &
+        :is(
+          [data-slot="sidebar-gap"],
+          [data-slot="sidebar-container"],
+          [data-slot="sidebar-group-label"],
+          [data-slot="sidebar-menu-button"],
+          [data-slot="sidebar-rail"]
+        ) {
+        transition-duration: 0s;
+      }
+
       /* Drawer: a fade. Dragging still works 1:1 and a release that closes keeps its path, but
          the stack, snap points and height don't slide; nothing is a spring. */
       & :is([data-slot="drawer-popup"], [data-slot="drawer-overlay"]) {
@@ -673,7 +769,10 @@
           [data-slot="input-otp-char"],
           [data-slot="avatar-image"],
           [data-slot="skeleton-content"],
-          [data-slot="accordion-trigger-icon"]
+          [data-slot="accordion-trigger-icon"],
+          [data-slot="progress-indicator"],
+          [data-slot="meter-indicator"],
+          [data-slot="meter-segment"]
         ) {
         transition-property: none;
       }
@@ -710,6 +809,10 @@
         }
       }
 
+      & [data-slot="alert"][data-ending-style] {
+        transition-duration: 0s;
+      }
+
       & :is([data-slot="skeleton"], [data-loader="lucide"]) {
         animation: none;
       }
@@ -765,6 +868,18 @@
       transition-duration: 0s;
     }
 
+    /* Sidebar: collapse and expand snap. */
+    &
+      :is(
+        [data-slot="sidebar-gap"],
+        [data-slot="sidebar-container"],
+        [data-slot="sidebar-group-label"],
+        [data-slot="sidebar-menu-button"],
+        [data-slot="sidebar-rail"]
+      ) {
+      transition-duration: 0s;
+    }
+
     /* Drawer: a fade. Dragging still works 1:1 and a release that closes keeps its path, but
        the stack, snap points and height don't slide; nothing is a spring. */
     & :is([data-slot="drawer-popup"], [data-slot="drawer-overlay"]) {
@@ -837,7 +952,10 @@
         [data-slot="input-otp-char"],
         [data-slot="avatar-image"],
         [data-slot="skeleton-content"],
-        [data-slot="accordion-trigger-icon"]
+        [data-slot="accordion-trigger-icon"],
+        [data-slot="progress-indicator"],
+        [data-slot="meter-indicator"],
+        [data-slot="meter-segment"]
       ) {
       transition-property: none;
     }
@@ -874,6 +992,10 @@
       }
     }
 
+    & [data-slot="alert"][data-ending-style] {
+      transition-duration: 0s;
+    }
+
     & :is([data-slot="skeleton"], [data-loader="lucide"]) {
       animation: none;
     }
@@ -933,7 +1055,13 @@
       [data-slot="drawer-overlay"],
       [data-slot="accordion-content"],
       [data-slot="collapsible-content"],
-      [data-slot="skeleton-content"]
+      [data-slot="skeleton-content"],
+      [data-slot="alert"][data-ending-style],
+      [data-slot="sidebar-gap"],
+      [data-slot="sidebar-container"],
+      [data-slot="sidebar-group-label"],
+      [data-slot="sidebar-menu-button"],
+      [data-slot="sidebar-rail"]
     ) {
     transition-duration: 0s;
   }