@rnine/core 0.0.0-stage → 0.1.1

package/README.md

@@ -1,3 +1,137 @@
-# Temporary Holding Version
+# @rnine/core
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**Docs and every component, live: [ui.rnine.dev](https://ui.rnine.dev)** (Storybook)
+
+The shared core of the design system libraries. Every library (like
+[`@rnine/nineos`](../nineos)) is built on it and exports everything it exports, with
+the same props, in its own look. On its own, core is a complete library too, in
+**Plain**: system fonts, neutral grays, one blue accent, rounded corners.
+
+What's in it:
+
+- **Components** every library shares: buttons, fields, cards, tables, modals, toasts,
+  panels, the menu rail, media, layout, the mood and motion toggles, ...
+- **Effects by role**: `TextReveal`, `Backdrop`, `Mark`, `PageEffects`, `swapIn`/`swapOut`.
+  Core components draw with the library's version (Plain's are still or simple fades).
+- **The mood engine**: two moods per library, one per color scheme, kept on
+  `<html data-scheme="light|dark">`, saved in the browser and optionally shared across
+  subdomains, with a first-paint boot script.
+- **The SCSS API**: tokens as variables, `type()`, `up()`/`down()`, `corner()`,
+  `ornament()`, `corner-ornament()`, `texture()`, `hairline()`, `glass()`, `focus-ring()`,
+  `keyframes()`, ...
+- **The token build tool** (`@rnine/core/build-tokens`) and **conformance checks**
+  (`@rnine/core/conformance`) for building a library of your own.
+
+## Use it in an app
+
+```bash
+npm install @rnine/core react react-dom    # or a library built on it, e.g. @rnine/nineos
+                                           # sass too, to use the SCSS API
+```
+
+```tsx
+// entry file, once
+import '@rnine/core/fonts.css';    // Plain uses system fonts: nothing to load (other libraries load theirs)
+import '@rnine/core/styles.css';   // tokens, base styles, shared keyframes, every component
+import { ThemeProvider } from '@rnine/core';
+import markSvg from './mark.svg?raw';
+
+createRoot(root).render(
+  <ThemeProvider
+    mark={{ full: markSvg }}                  // your logo, drawn by Mark (default: a placeholder frame)
+    mood={{ cookieDomain: 'example.com' }}    // optional: share the chosen mood across subdomains
+  >
+    <App />
+  </ThemeProvider>,
+);
+```
+
+The mood is saved in `localStorage` and a cookie, both named `mood` unless you pass
+`mood={{ storageKey }}`. Auto follows the library's rule (Plain: the system's light/dark
+setting; NineOS: light by day, dark at night for a dark system); `mood={{ auto }}`
+overrides it. To have the right mood on the first paint, put the library's
+`moodBootScript()` output (with the same key) in an inline `<script>` in your
+`index.html` `<head>`.
+
+```tsx
+// anywhere
+import { Button, Card, Section, TextField, useMood } from '@rnine/core';
+import { Backdrop, Magnet, TextReveal } from '@rnine/core/motion';
+```
+
+```scss
+// in any SCSS module
+@use "@rnine/core/scss" as r9;
+
+.button {
+  @include r9.type(label);
+  @include r9.corner(md);
+  background: r9.$accent;
+  color: r9.$on-accent;
+  @include r9.up(md) { padding-inline: r9.$space-6; }
+}
+```
+
+## Entry points
+
+| Import | What |
+|---|---|
+| `@rnine/core` | Components, `ThemeProvider`, `MarkProvider`, `Mark`, mood and motion hooks (`useMood`, `configureMood`, `moodBootScript`, ...) |
+| `@rnine/core/motion` | `TextReveal`, `useTextReveal`, `Backdrop`, `Mark`, `PageEffects`, `swapIn`/`swapOut`, `Magnet`, `TiltCard`, `Reveal`, `LiveClock`, `rippleAt` |
+| `@rnine/core/styles.css` | Plain's tokens, base styles and every component's styles (one file) |
+| `@rnine/core/scss` | The SCSS API, with Plain's tokens |
+| `@rnine/core/tokens` | Plain's tokens as data |
+| `@rnine/core/kit` | For building a library: `ThemeRoot`, `ThemeConfigProvider`, `MarkArt`, `cx`, ... |
+| `@rnine/core/build-tokens` | The token build tool (Node) |
+| `@rnine/core/conformance` | Contract and contrast checks for a library's tests (Node) |
+| `@rnine/core/base.css`, `components.css` | The parts of `styles.css` a library bundles after its own tokens |
+
+## Build a library on core
+
+A library has its own tokens (the same names as core's; color primitives are its own),
+a `theme.json` (its name, its two moods' names, its Auto rule), its versions of the role
+effects, and any components of its own. See [`@rnine/nineos`](../nineos) for a complete one:
+
+- `scripts/build.mjs`: `buildTokens({ root, contract })` from `@rnine/core/build-tokens`
+  (it fails if a token core components read is missing), then bundle `styles.css` as
+  tokens, core's `base.css`, its own base, core's `components.css`, its own components.
+- `src/index.ts`: `export * from '@rnine/core'`, then its own `ThemeProvider`
+  (`<ThemeRoot config={...} />` from `@rnine/core/kit`), `Mark`, `moodBootScript`, and
+  its additions. `src/motion.ts` likewise over `@rnine/core/motion`.
+- Tests: `contractProblems`, `contrastChecks` and `missingExports` from
+  `@rnine/core/conformance`.
+
+## Add a component to core
+
+```
+src/components/Name/
+  Name.tsx            the component; props documented with JSDoc
+  Name.module.scss    styles: only tokens and the shared mixins (@use "@rnine/core/scss" as r9)
+  Name.stories.tsx    every state; the docs description names the component's accent element
+  Name.test.tsx       behavior and accessible names (Testing Library)
+```
+
+Then export it from `src/index.ts`. Rules:
+
+- Style with tokens and the shared mixins only, so every library's look applies: mood
+  roles (never hex), `corner()` for shapes, `ornament()` for the accent mark.
+- At least one accent element (`r9.$accent`), named in the story docs.
+- Both moods work with no extra code.
+- Motion only inside `@include r9.motion-safe`, or JS gated by `useReducedMotion()`.
+- Visible labels, keyboard support, `:focus-visible` rings, 44px touch targets.
+- Cut corners clip outlines: draw focus inside (`box-shadow: inset 0 0 0 2px r9.$accent`).
+
+```bash
+yarn workspace @rnine/core test     # component tests, Plain's contrast and keyframes
+yarn workspace @rnine/core build    # tokens, then vite build, types, styles.css
+```
+
+Its stories show in the NineOS Storybook (`yarn workspace @rnine/nineos storybook`).
+
+## Build output
+
+`scripts/build.mjs` builds the tokens and `base.css`; `vite build` (library mode) writes one
+ES module per source file to `dist/` (so apps only bundle what they import) and
+`dist/components.css`; `tsc -p tsconfig.build.json` adds the type declarations; then
+`scripts/build.mjs --bundle` writes `dist/styles.css`. React is a peer dependency;
+lucide-react and dompurify stay external.

package/dist/_variables.scss

@@ -0,0 +1,197 @@
+// Plain tokens for SCSS. Generated by @rnine/core/build-tokens. Do not edit.
+// Every variable points at a CSS custom property, so the mood switches at
+// runtime (data-scheme="light" | "dark"). Media queries need plain values: use $breakpoints.
+
+// Primitives and scales
+$color-gray-0: var(--r9-color-gray-0);
+$color-gray-10: var(--r9-color-gray-10);
+$color-gray-25: var(--r9-color-gray-25);
+$color-gray-50: var(--r9-color-gray-50);
+$color-gray-100: var(--r9-color-gray-100);
+$color-gray-300: var(--r9-color-gray-300);
+$color-gray-500: var(--r9-color-gray-500);
+$color-gray-600: var(--r9-color-gray-600);
+$color-gray-800: var(--r9-color-gray-800);
+$color-gray-850: var(--r9-color-gray-850);
+$color-gray-900: var(--r9-color-gray-900);
+$color-gray-950: var(--r9-color-gray-950);
+$color-gray-975: var(--r9-color-gray-975);
+$color-blue-300: var(--r9-color-blue-300);
+$color-blue-400: var(--r9-color-blue-400);
+$color-blue-600: var(--r9-color-blue-600);
+$color-blue-700: var(--r9-color-blue-700);
+$color-cyan-300: var(--r9-color-cyan-300);
+$color-cyan-500: var(--r9-color-cyan-500);
+$color-cyan-700: var(--r9-color-cyan-700);
+$color-green-400: var(--r9-color-green-400);
+$color-green-700: var(--r9-color-green-700);
+$color-amber-400: var(--r9-color-amber-400);
+$color-amber-700: var(--r9-color-amber-700);
+$color-red-400: var(--r9-color-red-400);
+$color-red-700: var(--r9-color-red-700);
+$breakpoint-sm: var(--r9-breakpoint-sm);
+$breakpoint-md: var(--r9-breakpoint-md);
+$breakpoint-lg: var(--r9-breakpoint-lg);
+$container-max: var(--r9-container-max);
+$container-text: var(--r9-container-text);
+$container-gutter: var(--r9-container-gutter);
+$header-height: var(--r9-header-height);
+$z-base: var(--r9-z-base);
+$z-raised: var(--r9-z-raised);
+$z-sticky: var(--r9-z-sticky);
+$z-overlay: var(--r9-z-overlay);
+$z-modal: var(--r9-z-modal);
+$z-toast: var(--r9-z-toast);
+$z-fx: var(--r9-z-fx);
+$duration-instant: var(--r9-duration-instant);
+$duration-fast: var(--r9-duration-fast);
+$duration-base: var(--r9-duration-base);
+$duration-slow: var(--r9-duration-slow);
+$duration-slower: var(--r9-duration-slower);
+$duration-ambient: var(--r9-duration-ambient);
+$easing-out: var(--r9-easing-out);
+$easing-in-out: var(--r9-easing-in-out);
+$easing-linear: var(--r9-easing-linear);
+$corner-sm: var(--r9-corner-sm);
+$corner-md: var(--r9-corner-md);
+$corner-lg: var(--r9-corner-lg);
+$shape-cut: var(--r9-shape-cut);
+$shape-round: var(--r9-shape-round);
+$radius-none: var(--r9-radius-none);
+$radius-xs: var(--r9-radius-xs);
+$radius-full: var(--r9-radius-full);
+$border-hair: var(--r9-border-hair);
+$border-strong: var(--r9-border-strong);
+$space-0: var(--r9-space-0);
+$space-1: var(--r9-space-1);
+$space-2: var(--r9-space-2);
+$space-3: var(--r9-space-3);
+$space-4: var(--r9-space-4);
+$space-5: var(--r9-space-5);
+$space-6: var(--r9-space-6);
+$space-8: var(--r9-space-8);
+$space-10: var(--r9-space-10);
+$space-12: var(--r9-space-12);
+$space-16: var(--r9-space-16);
+$space-20: var(--r9-space-20);
+$space-24: var(--r9-space-24);
+$font-display: var(--r9-font-display);
+$font-body: var(--r9-font-body);
+$font-mono: var(--r9-font-mono);
+$font-size-xs: var(--r9-font-size-xs);
+$font-size-sm: var(--r9-font-size-sm);
+$font-size-base: var(--r9-font-size-base);
+$font-size-md: var(--r9-font-size-md);
+$font-size-lg: var(--r9-font-size-lg);
+$font-size-xl: var(--r9-font-size-xl);
+$font-size-2xl: var(--r9-font-size-2xl);
+$font-size-3xl: var(--r9-font-size-3xl);
+$font-size-4xl: var(--r9-font-size-4xl);
+$font-size-5xl: var(--r9-font-size-5xl);
+$font-weight-regular: var(--r9-font-weight-regular);
+$font-weight-medium: var(--r9-font-weight-medium);
+$font-weight-semibold: var(--r9-font-weight-semibold);
+$font-weight-bold: var(--r9-font-weight-bold);
+$leading-tight: var(--r9-leading-tight);
+$leading-snug: var(--r9-leading-snug);
+$leading-normal: var(--r9-leading-normal);
+$tracking-tight: var(--r9-tracking-tight);
+$tracking-normal: var(--r9-tracking-normal);
+$tracking-wide: var(--r9-tracking-wide);
+$tracking-wider: var(--r9-tracking-wider);
+$tracking-mark: var(--r9-tracking-mark);
+
+// Mood roles
+$bg: var(--r9-bg);
+$surface: var(--r9-surface);
+$surface-raised: var(--r9-surface-raised);
+$glass: var(--r9-glass);
+$fg: var(--r9-fg);
+$fg-muted: var(--r9-fg-muted);
+$fg-subtle: var(--r9-fg-subtle);
+$line: var(--r9-line);
+$line-strong: var(--r9-line-strong);
+$accent: var(--r9-accent);
+$accent-hover: var(--r9-accent-hover);
+$accent-text: var(--r9-accent-text);
+$on-accent: var(--r9-on-accent);
+$accent-soft: var(--r9-accent-soft);
+$signal: var(--r9-signal);
+$signal-text: var(--r9-signal-text);
+$inverse-bg: var(--r9-inverse-bg);
+$inverse-fg: var(--r9-inverse-fg);
+$success: var(--r9-success);
+$warning: var(--r9-warning);
+$danger: var(--r9-danger);
+$dot: var(--r9-dot);
+$scan: var(--r9-scan);
+$sheen: var(--r9-sheen);
+$selection: var(--r9-selection);
+
+$space: (
+  "0": var(--r9-space-0),
+  "1": var(--r9-space-1),
+  "2": var(--r9-space-2),
+  "3": var(--r9-space-3),
+  "4": var(--r9-space-4),
+  "5": var(--r9-space-5),
+  "6": var(--r9-space-6),
+  "8": var(--r9-space-8),
+  "10": var(--r9-space-10),
+  "12": var(--r9-space-12),
+  "16": var(--r9-space-16),
+  "20": var(--r9-space-20),
+  "24": var(--r9-space-24),
+);
+
+$corner: (
+  "sm": var(--r9-corner-sm),
+  "md": var(--r9-corner-md),
+  "lg": var(--r9-corner-lg),
+);
+
+$durations: (
+  "instant": var(--r9-duration-instant),
+  "fast": var(--r9-duration-fast),
+  "base": var(--r9-duration-base),
+  "slow": var(--r9-duration-slow),
+  "slower": var(--r9-duration-slower),
+  "ambient": var(--r9-duration-ambient),
+);
+
+$easings: (
+  "out": var(--r9-easing-out),
+  "in-out": var(--r9-easing-in-out),
+  "linear": var(--r9-easing-linear),
+);
+
+$z-index: (
+  "base": var(--r9-z-base),
+  "raised": var(--r9-z-raised),
+  "sticky": var(--r9-z-sticky),
+  "overlay": var(--r9-z-overlay),
+  "modal": var(--r9-z-modal),
+  "toast": var(--r9-z-toast),
+  "fx": var(--r9-z-fx),
+);
+
+$breakpoints: (
+  "sm": 640px,
+  "md": 900px,
+  "lg": 1200px,
+);
+
+$type-roles: (
+  "display": ("font-family": var(--r9-type-display-font-family), "font-weight": var(--r9-type-display-font-weight), "font-size": var(--r9-type-display-font-size), "line-height": var(--r9-type-display-line-height), "letter-spacing": var(--r9-type-display-letter-spacing)),
+  "h1": ("font-family": var(--r9-type-h1-font-family), "font-weight": var(--r9-type-h1-font-weight), "font-size": var(--r9-type-h1-font-size), "line-height": var(--r9-type-h1-line-height), "letter-spacing": var(--r9-type-h1-letter-spacing)),
+  "h2": ("font-family": var(--r9-type-h2-font-family), "font-weight": var(--r9-type-h2-font-weight), "font-size": var(--r9-type-h2-font-size), "line-height": var(--r9-type-h2-line-height), "letter-spacing": var(--r9-type-h2-letter-spacing)),
+  "h3": ("font-family": var(--r9-type-h3-font-family), "font-weight": var(--r9-type-h3-font-weight), "font-size": var(--r9-type-h3-font-size), "line-height": var(--r9-type-h3-line-height), "letter-spacing": var(--r9-type-h3-letter-spacing)),
+  "h4": ("font-family": var(--r9-type-h4-font-family), "font-weight": var(--r9-type-h4-font-weight), "font-size": var(--r9-type-h4-font-size), "line-height": var(--r9-type-h4-line-height), "letter-spacing": var(--r9-type-h4-letter-spacing)),
+  "body-lg": ("font-family": var(--r9-type-body-lg-font-family), "font-weight": var(--r9-type-body-lg-font-weight), "font-size": var(--r9-type-body-lg-font-size), "line-height": var(--r9-type-body-lg-line-height), "letter-spacing": var(--r9-type-body-lg-letter-spacing)),
+  "body": ("font-family": var(--r9-type-body-font-family), "font-weight": var(--r9-type-body-font-weight), "font-size": var(--r9-type-body-font-size), "line-height": var(--r9-type-body-line-height), "letter-spacing": var(--r9-type-body-letter-spacing)),
+  "body-sm": ("font-family": var(--r9-type-body-sm-font-family), "font-weight": var(--r9-type-body-sm-font-weight), "font-size": var(--r9-type-body-sm-font-size), "line-height": var(--r9-type-body-sm-line-height), "letter-spacing": var(--r9-type-body-sm-letter-spacing)),
+  "label": ("font-family": var(--r9-type-label-font-family), "font-weight": var(--r9-type-label-font-weight), "font-size": var(--r9-type-label-font-size), "line-height": var(--r9-type-label-line-height), "letter-spacing": var(--r9-type-label-letter-spacing)),
+  "code": ("font-family": var(--r9-type-code-font-family), "font-weight": var(--r9-type-code-font-weight), "font-size": var(--r9-type-code-font-size), "line-height": var(--r9-type-code-line-height), "letter-spacing": var(--r9-type-code-letter-spacing)),
+  "caption": ("font-family": var(--r9-type-caption-font-family), "font-weight": var(--r9-type-caption-font-weight), "font-size": var(--r9-type-caption-font-size), "line-height": var(--r9-type-caption-line-height), "letter-spacing": var(--r9-type-caption-letter-spacing)),
+  "wordmark": ("font-family": var(--r9-type-wordmark-font-family), "font-weight": var(--r9-type-wordmark-font-weight), "font-size": var(--r9-type-wordmark-font-size), "line-height": var(--r9-type-wordmark-line-height), "letter-spacing": var(--r9-type-wordmark-letter-spacing)),
+);

package/dist/base.css

@@ -0,0 +1,106 @@
+/* Base element styles and shared keyframes. Generated from scss/base.scss. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--r9-bg);
+  color: var(--r9-fg);
+  font-family: var(--r9-type-body-font-family);
+  font-weight: var(--r9-type-body-font-weight);
+  font-size: var(--r9-type-body-font-size);
+  line-height: var(--r9-type-body-line-height);
+  letter-spacing: var(--r9-type-body-letter-spacing);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-family: var(--r9-font-display);
+  text-wrap: balance;
+}
+
+p {
+  margin: 0;
+}
+
+img, svg, video, canvas {
+  max-width: 100%;
+}
+
+code, kbd, samp, pre {
+  font-family: var(--r9-font-mono);
+}
+
+a {
+  color: inherit;
+}
+
+::selection {
+  background: var(--r9-selection);
+}
+
+:focus-visible {
+  outline: 2px solid var(--r9-accent);
+  outline-offset: 3px;
+}
+
+@keyframes r9-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes r9-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.25;
+  }
+}
+@keyframes r9-blink {
+  50% {
+    opacity: 0;
+  }
+}
+@keyframes r9-sheen {
+  0% {
+    background-position: 120% 0;
+  }
+  45%, 100% {
+    background-position: -30% 0;
+  }
+}
+:root[data-motion=reduced] *,
+:root[data-motion=reduced] *::before,
+:root[data-motion=reduced] *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+  scroll-behavior: auto !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type AlertTone = 'info' | 'success' | 'warning' | 'danger';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    tone?: AlertTone;
+    title: ReactNode;
+    children?: ReactNode;
+    /** Shows a close button. */
+    onDismiss?: () => void;
+    /** Buttons or links under the message. */
+    actions?: ReactNode;
+};
+/**
+ * A message about something that happened or needs attention. Status color
+ * on the edge and icon, never color alone. Accent element: the mark after
+ * the title. Danger alerts interrupt screen readers; the rest are polite.
+ */
+export declare function Alert({ tone, title, children, onDismiss, actions, className, ...rest }: Props): import("react").JSX.Element;
+export {};

package/dist/components/Alert/Alert.js

@@ -0,0 +1,57 @@
+import { cx as e } from "../../utils/cx.js";
+import t from "./Alert.module.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Check as i, Info as a, OctagonAlert as o, TriangleAlert as s, X as c } from "lucide-react";
+//#region src/components/Alert/Alert.tsx
+var l = {
+	info: a,
+	success: i,
+	warning: s,
+	danger: o
+};
+function u({ tone: i = "info", title: a, children: o, onDismiss: s, actions: u, className: d, ...f }) {
+	let p = l[i];
+	return /* @__PURE__ */ r("div", {
+		...f,
+		role: i === "danger" ? "alert" : "status",
+		className: e(t.alert, t[i], d),
+		children: [
+			/* @__PURE__ */ n(p, {
+				className: t.icon,
+				strokeWidth: 1.5,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ r("div", {
+				className: t.body,
+				children: [
+					/* @__PURE__ */ n("p", {
+						className: t.title,
+						children: a
+					}),
+					o && /* @__PURE__ */ n("div", {
+						className: t.message,
+						children: o
+					}),
+					u && /* @__PURE__ */ n("div", {
+						className: t.actions,
+						children: u
+					})
+				]
+			}),
+			s && /* @__PURE__ */ n("button", {
+				type: "button",
+				className: t.dismiss,
+				onClick: s,
+				"aria-label": "Dismiss",
+				children: /* @__PURE__ */ n(c, {
+					strokeWidth: 1.5,
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { u as Alert };
+
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","names":[],"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport { Check, Info, OctagonAlert, TriangleAlert, X } from 'lucide-react';\nimport { cx } from '../../utils/cx';\nimport styles from './Alert.module.scss';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger';\n\ntype Props = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n  tone?: AlertTone;\n  title: ReactNode;\n  children?: ReactNode;\n  /** Shows a close button. */\n  onDismiss?: () => void;\n  /** Buttons or links under the message. */\n  actions?: ReactNode;\n};\n\nconst ICONS = { info: Info, success: Check, warning: TriangleAlert, danger: OctagonAlert };\n\n/**\n * A message about something that happened or needs attention. Status color\n * on the edge and icon, never color alone. Accent element: the mark after\n * the title. Danger alerts interrupt screen readers; the rest are polite.\n */\nexport function Alert({ tone = 'info', title, children, onDismiss, actions, className, ...rest }: Props) {\n  const Icon = ICONS[tone];\n  return (\n    <div {...rest} role={tone === 'danger' ? 'alert' : 'status'} className={cx(styles.alert, styles[tone], className)}>\n      <Icon className={styles.icon} strokeWidth={1.5} aria-hidden=\"true\" />\n      <div className={styles.body}>\n        <p className={styles.title}>{title}</p>\n        {children && <div className={styles.message}>{children}</div>}\n        {actions && <div className={styles.actions}>{actions}</div>}\n      </div>\n      {onDismiss && (\n        <button type=\"button\" className={styles.dismiss} onClick={onDismiss} aria-label=\"Dismiss\">\n          <X strokeWidth={1.5} aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAiBA,IAAM,IAAQ;CAAE,MAAM;CAAM,SAAS;CAAO,SAAS;CAAe,QAAQ;AAAa;AAOzF,SAAgB,EAAM,EAAE,UAAO,QAAQ,UAAO,aAAU,cAAW,YAAS,cAAW,GAAG,KAAe;CACvG,IAAM,IAAO,EAAM;CACnB,OACE,kBAAC,OAAD;EAAK,GAAI;EAAM,MAAM,MAAS,WAAW,UAAU;EAAU,WAAW,EAAG,EAAO,OAAO,EAAO,IAAO,CAAS;YAAhH;GACE,kBAAC,GAAD;IAAM,WAAW,EAAO;IAAM,aAAa;IAAK,eAAY;GAAQ,CAAA;GACpE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB;KACE,kBAAC,KAAD;MAAG,WAAW,EAAO;gBAAQ;KAAS,CAAA;KACrC,KAAY,kBAAC,OAAD;MAAK,WAAW,EAAO;MAAU;KAAc,CAAA;KAC3D,KAAW,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAU;KAAa,CAAA;IACvD;;GACJ,KACC,kBAAC,UAAD;IAAQ,MAAK;IAAS,WAAW,EAAO;IAAS,SAAS;IAAW,cAAW;cAC9E,kBAAC,GAAD;KAAG,aAAa;KAAK,eAAY;IAAQ,CAAA;GACnC,CAAA;EAEP;;AAET"}

package/dist/components/Alert/Alert.module.js

@@ -0,0 +1,17 @@
+var e = {
+	alert: "r9-Alert-module_alert_zP4AL",
+	info: "r9-Alert-module_info_-J-F1",
+	success: "r9-Alert-module_success_lftZT",
+	warning: "r9-Alert-module_warning_uOpos",
+	danger: "r9-Alert-module_danger_53-01",
+	icon: "r9-Alert-module_icon_RUu7X",
+	body: "r9-Alert-module_body_IOnct",
+	title: "r9-Alert-module_title_QHuwO",
+	message: "r9-Alert-module_message_Wd9FZ",
+	actions: "r9-Alert-module_actions_6On2P",
+	dismiss: "r9-Alert-module_dismiss_4orzR"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Alert.module.js.map

package/dist/components/Alert/Alert.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.module.js","names":[],"sources":["../../../src/components/Alert/Alert.module.scss"],"sourcesContent":["@use \"@rnine/core/scss\" as r9;\n\n.alert {\n  --tone: #{r9.$signal};\n  display: flex;\n  align-items: flex-start;\n  gap: r9.$space-3;\n  padding: r9.$space-4;\n  background: r9.$surface;\n  @include r9.hairline;\n  border-left: 3px solid var(--tone);\n  min-width: 0;\n}\n\n.info { --tone: #{r9.$signal-text}; }\n.success { --tone: #{r9.$success}; }\n.warning { --tone: #{r9.$warning}; }\n.danger { --tone: #{r9.$danger}; }\n\n.icon {\n  flex: none;\n  width: 20px;\n  height: 20px;\n  margin-top: 1px;\n  color: var(--tone);\n}\n\n.body {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: r9.$space-1;\n}\n\n// The alert's accent mark follows its title\n.title {\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: r9.$space-2;\n  font-weight: r9.$font-weight-semibold;\n\n  &::after { @include r9.ornament(5px); }\n}\n\n.message {\n  @include r9.type(body-sm);\n  color: r9.$fg-muted;\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: r9.$space-4;\n  margin-top: r9.$space-2;\n}\n\n.dismiss {\n  flex: none;\n  display: grid;\n  place-items: center;\n  width: 32px;\n  height: 32px;\n  margin: -6px -6px 0 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: r9.$fg-muted;\n  cursor: pointer;\n\n  svg { width: 18px; height: 18px; }\n  &:hover { color: r9.$accent-text; }\n  &:focus-visible { @include r9.focus-ring(0); }\n}\n"],"mappings":""}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,14 @@
+type Props = {
+    /** Person's name: the image's alt text and the source of the initials. */
+    name: string;
+    src?: string;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+};
+/**
+ * A person's picture, or their initials when there is none (or it fails to
+ * load). Round, whatever the library's corners. Accent element: the
+ * initials tile, or the ring around a photo.
+ */
+export declare function Avatar({ name, src, size, className }: Props): import("react").JSX.Element;
+export {};

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,29 @@
+import { cx as e } from "../../utils/cx.js";
+import t from "./Avatar.module.js";
+import { useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Avatar/Avatar.tsx
+function i(e) {
+	let t = e.trim().split(/\s+/).filter(Boolean);
+	return t.length === 0 ? "?" : `${t[0][0]}${t.length > 1 ? t[t.length - 1][0] : t[0][1] ?? ""}`.toUpperCase();
+}
+function a({ name: a, src: o, size: s = "md", className: c }) {
+	let [l, u] = n(!1), d = o && !l;
+	return /* @__PURE__ */ r("span", {
+		className: e(t.avatar, t[s], d ? t.photo : t.initials, c),
+		children: d ? /* @__PURE__ */ r("img", {
+			src: o,
+			alt: a,
+			loading: "lazy",
+			onError: () => u(!0)
+		}) : /* @__PURE__ */ r("span", {
+			role: "img",
+			"aria-label": a,
+			children: i(a)
+		})
+	});
+}
+//#endregion
+export { a as Avatar };
+
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { cx } from '../../utils/cx';\nimport styles from './Avatar.module.scss';\n\ntype Props = {\n  /** Person's name: the image's alt text and the source of the initials. */\n  name: string;\n  src?: string;\n  size?: 'sm' | 'md' | 'lg';\n  className?: string;\n};\n\nfunction initials(name: string) {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return '?';\n  const first = parts[0][0];\n  const last = parts.length > 1 ? parts[parts.length - 1][0] : parts[0][1] ?? '';\n  return `${first}${last}`.toUpperCase();\n}\n\n/**\n * A person's picture, or their initials when there is none (or it fails to\n * load). Round, whatever the library's corners. Accent element: the\n * initials tile, or the ring around a photo.\n */\nexport function Avatar({ name, src, size = 'md', className }: Props) {\n  const [failed, setFailed] = useState(false);\n  const showImage = src && !failed;\n  return (\n    <span className={cx(styles.avatar, styles[size], showImage ? styles.photo : styles.initials, className)}>\n      {showImage ? (\n        <img src={src} alt={name} loading=\"lazy\" onError={() => setFailed(true)} />\n      ) : (\n        <span role=\"img\" aria-label={name}>{initials(name)}</span>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAYA,SAAS,EAAS,GAAc;CAC9B,IAAM,IAAQ,EAAK,KAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO;CAIrD,OAHI,EAAM,WAAW,IAAU,MAGxB,GAFO,EAAM,GAAG,KACV,EAAM,SAAS,IAAI,EAAM,EAAM,SAAS,GAAG,KAAK,EAAM,GAAG,MAAM,KACnD,YAAY;AACvC;AAOA,SAAgB,EAAO,EAAE,SAAM,QAAK,UAAO,MAAM,gBAAoB;CACnE,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAY,KAAO,CAAC;CAC1B,OACE,kBAAC,QAAD;EAAM,WAAW,EAAG,EAAO,QAAQ,EAAO,IAAO,IAAY,EAAO,QAAQ,EAAO,UAAU,CAAS;YACnG,IACC,kBAAC,OAAD;GAAU;GAAK,KAAK;GAAM,SAAQ;GAAO,eAAe,EAAU,EAAI;EAAI,CAAA,IAE1E,kBAAC,QAAD;GAAM,MAAK;GAAM,cAAY;aAAO,EAAS,CAAI;EAAQ,CAAA;CAEvD,CAAA;AAEV"}

package/dist/components/Avatar/Avatar.module.js

@@ -0,0 +1,12 @@
+var e = {
+	avatar: "r9-Avatar-module_avatar_5-kP8",
+	sm: "r9-Avatar-module_sm_8TB22",
+	md: "r9-Avatar-module_md_zeW0d",
+	lg: "r9-Avatar-module_lg_MWKN-",
+	initials: "r9-Avatar-module_initials_rYuAj",
+	photo: "r9-Avatar-module_photo_iMez8"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Avatar.module.js.map

package/dist/components/Avatar/Avatar.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.module.js","names":[],"sources":["../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":["@use \"@rnine/core/scss\" as r9;\n\n.avatar {\n  --size: 40px;\n  position: relative;\n  display: inline-grid;\n  place-items: center;\n  flex: none;\n  width: var(--size);\n  height: var(--size);\n  border-radius: r9.$radius-full;\n  overflow: hidden;\n  font-family: r9.$font-display;\n  font-weight: r9.$font-weight-semibold;\n  font-size: calc(var(--size) * 0.38);\n  line-height: 1;\n\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: inherit;\n  }\n}\n\n.sm { --size: 28px; }\n.md { --size: 40px; }\n.lg { --size: 64px; }\n\n.initials {\n  background: r9.$accent;\n  color: r9.$on-accent;\n}\n\n// A thin accent ring, separated from the photo by the page color\n.photo {\n  overflow: visible;\n  box-shadow: 0 0 0 2px r9.$bg, 0 0 0 3px r9.$accent;\n}\n"],"mappings":""}

package/dist/components/Brand/Brand.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+type WordmarkProps = HTMLAttributes<HTMLSpanElement> & {
+    /** Text to set as a wordmark. Default: the library's name. */
+    children?: ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+};
+/** Wide-tracked uppercase wordmark in the display font (N I N E O S). */
+export declare function Wordmark({ children, size, className, ...rest }: WordmarkProps): import("react").JSX.Element;
+type MoodToggleProps = {
+    className?: string;
+    label?: string; /** Leave out "Auto" (e.g. in a tight HUD). */
+    withAuto?: boolean;
+};
+/**
+ * Auto / light mood / dark mood switch, labeled with the library's mood
+ * names (NineOS: Auto, Clear, Cipher). Auto follows the library's Auto rule;
+ * a click on a mood sets data-scheme on <html> and saves the choice in the
+ * browser. Accent element: the selected option's underline.
+ */
+export declare function MoodToggle({ className, label, withAuto }: MoodToggleProps): import("react").JSX.Element;
+/**
+ * Motion | Still: the viewer's own switch for movement (the backdrop,
+ * revealing titles, swaps, page effects), for anyone who wants it calmer without
+ * changing their system. Remembered in the browser. When the system already
+ * asks for reduced motion, it shows Still and can't be turned back on here.
+ * Accent element: the selected option's underline.
+ */
+export declare function MotionToggle({ className, label }: {
+    className?: string;
+    label?: string;
+}): import("react").JSX.Element;
+export {};