@hideyukimori/nene2-ui 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 HideyukiMORI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,192 @@
+# @hideyukimori/nene2-ui
+
+Shared React UI kit for the NeNe fleet. **Components carry no design of their own — themes do.**
+
+## Why this exists
+
+The fleet already had design **tokens** (`@hideyukimori/nene2-tokens`) and a **conformance
+checker** (`@hideyukimori/nene2-standards`) — but no box to ship the actual parts in. So every
+product wrote its own, and consistency was chased afterwards by counting violations.
+
+Measured across the 13 product frontends on 2026-08-23:
+
+| Component    | Independent implementations |
+| ------------ | --------------------------: |
+| `Button`     |                      **20** |
+| `Input`      |                          17 |
+| `Select`     |                          16 |
+| `EmptyState` |                          15 |
+| `Text`       |                          14 |
+| `Stack`      |                          12 |
+
+Of the **266** files in the fleet's `shared/ui` directories, **74% share a name with at least one
+other product**. The designs had already converged — only the execution was scattered N ways.
+
+🔑 **Enforcing consistency by inspection scales with the number of deviations, which has no upper
+bound. Providing the parts scales with the number of screens, which is finite.**
+
+## Design principles
+
+1. **Pass native props through.** Every primitive extends its element's HTML attributes, so there
+   is nothing new to learn and nothing that quietly breaks accessibility.
+2. **`className` composes, never replaces.** Caller classes are appended last via `cx`, so
+   Tailwind's later-wins cascade makes them an escape hatch rather than a footgun.
+3. **No colour, spacing or radius props.** `<Button color="#f00">` does not exist. If a variant
+   cannot express it, add a variant — for everyone. _This is the principle that matters:_ the
+   13,021 style violations the fleet is currently remediating exist because values could be
+   written inline. Make them unwritable and there is nothing to inspect.
+4. **No strings.** The kit ships no user-visible text. `Spinner` takes `label`, `ErrorState` takes
+   `retryLabel`. Localisation stays with the product (`@hideyukimori/nene2-i18n`), so a wording
+   change never becomes a kit release.
+5. **The three states ship together.** `LoadingState` / `EmptyState` / `ErrorState` exist as a set
+   so a screen that handles only the happy path is visibly incomplete.
+
+## Install
+
+```bash
+npm i @hideyukimori/nene2-ui
+```
+
+Peer dependencies: `react >= 19`, `tailwindcss >= 4`.
+
+## Use
+
+```css
+/* src/shared/ui/theme/index.css */
+@import 'tailwindcss';
+@import '@hideyukimori/nene2-ui/themes/default.css';
+
+/* 🔴 Required. Adjust the relative path to reach your node_modules. */
+@source '../../../../node_modules/@hideyukimori/nene2-ui/dist';
+```
+
+### 🔴 The `@source` line is not optional
+
+Tailwind v4 discovers classes by scanning your source files, and **it does not walk
+`node_modules`**. Every class this kit ships lives in its `dist/`, so without that line
+Tailwind never sees them and **generates none of them**.
+
+Nothing goes red when this happens. Measured by nene-vault on 2026-08-23 in a real
+application: the build passed with no warning, the types passed, **all 275 tests passed**,
+and the stylesheet came out 47.1 KB instead of 58.6 KB — with every `gap-*`, `rounded-*`,
+focus ring and disabled treatment missing. The tell was that `p-x-lg`, the _same token_
+written in the app's own `.tsx`, was generated. The only difference is which directory the
+file sits in.
+
+A test suite cannot catch it either: jsdom does not compute styles. On screen the symptom is
+simply "the kit does not seem to do anything".
+
+### Proving it, so nobody has to remember
+
+The kit exports a class that exists nowhere except its own `dist`. If your build generates
+it, the kit is in your `@source`; if not, every class the kit ships was dropped. Check it
+where you already check other things:
+
+```js
+import { SOURCE_PROBE_CLASS } from '@hideyukimori/nene2-ui';
+import { readFileSync } from 'node:fs';
+
+const css = readFileSync('dist/assets/index.css', 'utf8');
+if (!css.includes(`.${SOURCE_PROBE_CLASS}`)) {
+  throw new Error('nene2-ui is not in Tailwind @source — none of its classes were generated');
+}
+```
+
+The probe resolves to `padding: 0px`, so it changes nothing if it is ever applied.
+
+```tsx
+import { PageHeader, Button, FormField, Input, EmptyState } from '@hideyukimori/nene2-ui';
+
+export function InvoiceListPage({ t, invoices }) {
+  return (
+    <>
+      <PageHeader title={t('invoices.title')} actions={<Button>{t('invoices.new')}</Button>} />
+      {invoices.length === 0 ? (
+        <EmptyState message={t('invoices.empty')} />
+      ) : (
+        <InvoiceTable rows={invoices} />
+      )}
+    </>
+  );
+}
+```
+
+## Theming
+
+Components reference Tailwind utilities derived from `@theme` custom properties. A theme is one
+CSS file of ~20 lines, and it is the **only** place a design value may appear.
+
+```
+tokens contract ──themegen──▶ themes/<name>.css  (@theme block)
+                                    │
+                     product's active.css imports exactly one
+```
+
+To rebrand, replace the theme file. **Never edit a component.** This is what makes adopting the
+kit reversible: the look is 20 lines away from being something else.
+
+Regenerate a theme from the token contract with:
+
+```bash
+npx @hideyukimori/nene2-tokens themegen
+```
+
+## What is in scope
+
+**In:** admin console and business-screen UI, page layout scaffolding, form field structure, the
+loading/empty/error state set, read-only detail displays.
+
+**Out:** end-user-facing themes that are a _product feature_ (NeNe Records ships 30 of them —
+`aurora`, `newsprint`, `noir`, `japandi`, …), public marketing and brand surfaces, domain-specific
+screens (invoice previews, kanban boards, reports), and anything in the `model/` layer — data
+fetching and state are governed by `@hideyukimori/nene2-standards`, not by this kit.
+
+## Components
+
+🔴 **This table is generated from `src/index.ts`.** Regenerate it when you add a component —
+a component list that lags the code is how a product ends up writing a part that already exists.
+
+| Group        | Components                                                                               |
+| ------------ | ---------------------------------------------------------------------------------------- |
+| `primitives` | `Button` `Input` `Select` `Spinner` `Text` `Textarea` `Icon` `Checkbox` `Radio` `Switch` |
+| `layout`     | `PageHeader` `Stack` `Grid` `Box` `Section` `Card`                                       |
+| `forms`      | `FormField`                                                                              |
+| `states`     | `LoadingState` `EmptyState` `ErrorState`                                                 |
+| `overlay`    | `Modal` `ConfirmDialog`                                                                  |
+| `feedback`   | `Badge` `InlineAlert` `ToastProvider`                                                    |
+| `data`       | `DetailList` `DataTable` `Pagination`                                                    |
+| `theme`      | `tokens` (read-only `var()` accessors for canvas/chart use)                              |
+
+`Input`, `Select` and `Textarea` use `forwardRef`, so they drop straight into
+`react-hook-form`'s `register`, and pick up their `id` / `aria-describedby` from the
+`FormField` around them.
+
+### Not yet here
+
+`BrandMark` — measured as recurring
+across ≥3 products. They land as migrating products contribute their implementation upward,
+rather than being designed up front.
+
+Until one lands, a product writing its own control can import `CONTROL_CLASS` so that at least
+the focus ring and the disabled treatment match the rest of the kit. **What each product imports
+it for is the measured list of what the kit is still missing.**
+
+## Contributing a component
+
+The kit grows by **promotion, not invention**. If a screen needs something the kit lacks:
+
+1. Build it in that product's `shared/ui` first, against tokens only.
+2. When a second product needs the same thing, promote it here — the second use is the evidence.
+3. Open an issue if a variant is missing. **Do not special-case it in the screen**; one exception
+   granted is the moment the kit stops meaning anything.
+
+## Development
+
+```bash
+npm ci
+npm run check    # type-check + format:check + test
+```
+
+## License
+
+MIT © hideyuki MORI

package/dist/data/DataTable.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+export interface DataColumn<Row> {
+    /** Stable key, also used as the React key. */
+    key: string;
+    /** Localized column heading. */
+    header: string;
+    /** Cell renderer. Kept explicit so a column can render a Badge, a link, anything. */
+    cell: (row: Row) => ReactNode;
+    /** Numeric columns read better right-aligned. Alignment, not styling. */
+    align?: 'start' | 'end';
+}
+export interface DataTableProps<Row> {
+    columns: DataColumn<Row>[];
+    rows: Row[];
+    /** Stable identity per row. Index-as-key breaks as soon as the list is sorted. */
+    rowKey: (row: Row) => string;
+    /** Localized description of what the table contains. Becomes the table's caption. */
+    caption: string;
+}
+/**
+ * A tabular list.
+ *
+ * 🔴 Every heading carries `scope="col"`. Without it a screen reader cannot pair a cell with
+ * its column, so each cell is read as a bare value — and nothing about the rendered table
+ * looks any different, which is why three ships each shipped a table and the `scope` is the
+ * detail most likely to differ between them.
+ *
+ * 🔴 The caption is required, not optional. A visually obvious table ("it's clearly the
+ * invoice list") is not obvious to someone arriving at it by keyboard from elsewhere on the
+ * page. It is visually hidden, not absent.
+ */
+export declare function DataTable<Row>({ columns, rows, rowKey, caption }: DataTableProps<Row>): import("react").JSX.Element;

package/dist/data/DataTable.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A tabular list.
+ *
+ * 🔴 Every heading carries `scope="col"`. Without it a screen reader cannot pair a cell with
+ * its column, so each cell is read as a bare value — and nothing about the rendered table
+ * looks any different, which is why three ships each shipped a table and the `scope` is the
+ * detail most likely to differ between them.
+ *
+ * 🔴 The caption is required, not optional. A visually obvious table ("it's clearly the
+ * invoice list") is not obvious to someone arriving at it by keyboard from elsewhere on the
+ * page. It is visually hidden, not absent.
+ */
+export function DataTable({ columns, rows, rowKey, caption }) {
+    return (_jsxs("table", { className: "w-full border-collapse font-sans text-text-primary", children: [_jsx("caption", { className: "sr-only", children: caption }), _jsx("thead", { children: _jsx("tr", { children: columns.map((col) => (_jsx("th", { scope: "col", className: `border-b border-border px-x-2xs py-x-3xs font-medium text-text-muted ${col.align === 'end' ? 'text-right' : 'text-left'}`, children: col.header }, col.key))) }) }), _jsx("tbody", { children: rows.map((row) => (_jsx("tr", { children: columns.map((col) => (_jsx("td", { className: `border-b border-border px-x-2xs py-x-3xs ${col.align === 'end' ? 'text-right' : 'text-left'}`, children: col.cell(row) }, col.key))) }, rowKey(row)))) })] }));
+}
+//# sourceMappingURL=DataTable.js.map

package/dist/data/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../src/data/DataTable.tsx"],"names":[],"mappings":";AAsBA;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,SAAS,CAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAuB;IACpF,OAAO,CACL,iBAAO,SAAS,EAAC,oDAAoD,aACnE,kBAAS,SAAS,EAAC,SAAS,YAAE,OAAO,GAAW,EAChD,0BACE,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,aAEE,KAAK,EAAC,KAAK,EACX,SAAS,EAAE,wEACT,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WACvC,EAAE,YAED,GAAG,CAAC,MAAM,IANN,GAAG,CAAC,GAAG,CAOT,CACN,CAAC,GACC,GACC,EACR,0BACG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,aAEE,SAAS,EAAE,4CACT,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WACvC,EAAE,YAED,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IALT,GAAG,CAAC,GAAG,CAMT,CACN,CAAC,IAVK,MAAM,CAAC,GAAG,CAAC,CAWf,CACN,CAAC,GACI,IACF,CACT,CAAC;AACJ,CAAC"}

package/dist/data/DetailList.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export interface DetailRow {
+    /** Localized row label. */
+    label: string;
+    value: ReactNode;
+}
+export interface DetailListProps {
+    rows: DetailRow[];
+}
+/**
+ * Read-only key/value display for detail screens. Uses a description list so the
+ * label/value relationship is conveyed to assistive technology.
+ */
+export declare function DetailList({ rows }: DetailListProps): import("react").JSX.Element;

package/dist/data/DetailList.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Read-only key/value display for detail screens. Uses a description list so the
+ * label/value relationship is conveyed to assistive technology.
+ */
+export function DetailList({ rows }) {
+    return (_jsx("dl", { className: "flex flex-col gap-x-stack-sm", children: rows.map((row) => (_jsxs("div", { className: "flex flex-col gap-x-inline-sm border-b border-border py-x-stack-sm", children: [_jsx("dt", { className: "font-sans font-medium text-text-muted", children: row.label }), _jsx("dd", { className: "font-sans text-text-primary", children: row.value })] }, row.label))) }));
+}
+//# sourceMappingURL=DetailList.js.map

package/dist/data/DetailList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailList.js","sourceRoot":"","sources":["../../src/data/DetailList.tsx"],"names":[],"mappings":";AAYA;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,IAAI,EAAmB;IAClD,OAAO,CACL,aAAI,SAAS,EAAC,8BAA8B,YACzC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,eAEE,SAAS,EAAC,oEAAoE,aAE9E,aAAI,SAAS,EAAC,uCAAuC,YAAE,GAAG,CAAC,KAAK,GAAM,EACtE,aAAI,SAAS,EAAC,6BAA6B,YAAE,GAAG,CAAC,KAAK,GAAM,KAJvD,GAAG,CAAC,KAAK,CAKV,CACP,CAAC,GACC,CACN,CAAC;AACJ,CAAC"}

package/dist/data/Pagination.d.ts

@@ -0,0 +1,26 @@
+export interface PaginationProps {
+    /** 1-based. */
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** Localized name for the navigation region, e.g. "Invoice pages". */
+    label: string;
+    previousLabel: string;
+    nextLabel: string;
+    /** Localized current position, e.g. "Page 2 of 9". The kit ships no strings. */
+    status: string;
+}
+/**
+ * Page-by-page navigation for a list.
+ *
+ * 🔴 The current position is text, and the region is a named `<nav>`. Four ships wrote this
+ * component and the recurring shape marks the current page by colour alone — which is
+ * invisible to a screen reader and to anyone who cannot distinguish the two shades. The
+ * `status` string is required for the same reason: "you are here" has to be readable, not
+ * merely visible.
+ *
+ * The ends are disabled rather than hidden. A control that disappears at the boundary makes
+ * the row of controls jump, and moves the next-page button under the cursor that just
+ * clicked it.
+ */
+export declare function Pagination({ page, pageCount, onPageChange, label, previousLabel, nextLabel, status, }: PaginationProps): import("react").JSX.Element;

package/dist/data/Pagination.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../primitives/Button.js';
+import { Stack } from '../layout/Stack.js';
+/**
+ * Page-by-page navigation for a list.
+ *
+ * 🔴 The current position is text, and the region is a named `<nav>`. Four ships wrote this
+ * component and the recurring shape marks the current page by colour alone — which is
+ * invisible to a screen reader and to anyone who cannot distinguish the two shades. The
+ * `status` string is required for the same reason: "you are here" has to be readable, not
+ * merely visible.
+ *
+ * The ends are disabled rather than hidden. A control that disappears at the boundary makes
+ * the row of controls jump, and moves the next-page button under the cursor that just
+ * clicked it.
+ */
+export function Pagination({ page, pageCount, onPageChange, label, previousLabel, nextLabel, status, }) {
+    return (_jsx("nav", { "aria-label": label, children: _jsxs(Stack, { direction: "horizontal", gap: "2xs", align: "center", children: [_jsx(Button, { variant: "secondary", disabled: page <= 1, onClick: () => onPageChange(page - 1), "aria-label": previousLabel, children: previousLabel }), _jsx("span", { "aria-current": "page", className: "font-sans text-text-muted", children: status }), _jsx(Button, { variant: "secondary", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), "aria-label": nextLabel, children: nextLabel })] }) }));
+}
+//# sourceMappingURL=Pagination.js.map

package/dist/data/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/data/Pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAe3C;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,KAAK,EACL,aAAa,EACb,SAAS,EACT,MAAM,GACU;IAChB,OAAO,CACL,4BAAiB,KAAK,YACpB,MAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,aACpD,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,IAAI,IAAI,CAAC,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC,gBACzB,aAAa,YAExB,aAAa,GACP,EACT,+BAAmB,MAAM,EAAC,SAAS,EAAC,2BAA2B,YAC5D,MAAM,GACF,EACP,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,IAAI,IAAI,SAAS,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC,gBACzB,SAAS,YAEpB,SAAS,GACH,IACH,GACJ,CACP,CAAC;AACJ,CAAC"}

package/dist/feedback/Badge.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export interface BadgeProps {
+    /** What the badge means, not what colour it is. */
+    tone?: 'neutral' | 'accent' | 'danger';
+    children: ReactNode;
+}
+/**
+ * A small status marker.
+ *
+ * 🔴 `tone` names a meaning, never a colour. `<Badge tone="danger">` survives a rebrand;
+ * `<Badge color="red">` becomes a lie the moment the theme changes, and there is no way to
+ * find every such lie afterwards except by reading every screen.
+ */
+export declare function Badge({ tone, children }: BadgeProps): import("react").JSX.Element;

package/dist/feedback/Badge.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../lib/cx.js';
+const TONE_CLASS = {
+    neutral: 'bg-surface text-text-muted border-border',
+    accent: 'bg-accent text-on-accent border-accent',
+    danger: 'bg-danger text-on-accent border-danger',
+};
+/**
+ * A small status marker.
+ *
+ * 🔴 `tone` names a meaning, never a colour. `<Badge tone="danger">` survives a rebrand;
+ * `<Badge color="red">` becomes a lie the moment the theme changes, and there is no way to
+ * find every such lie afterwards except by reading every screen.
+ */
+export function Badge({ tone = 'neutral', children }) {
+    return (_jsx("span", { className: cx('inline-flex items-center rounded-x-md border px-x-2xs py-x-3xs font-sans', TONE_CLASS[tone]), children: children }));
+}
+//# sourceMappingURL=Badge.js.map

package/dist/feedback/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/feedback/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAQlC,MAAM,UAAU,GAAoD;IAClE,OAAO,EAAE,0CAA0C;IACnD,MAAM,EAAE,wCAAwC;IAChD,MAAM,EAAE,wCAAwC;CACjD,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,QAAQ,EAAc;IAC9D,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,0EAA0E,EAC1E,UAAU,CAAC,IAAI,CAAC,CACjB,YAEA,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC"}

package/dist/feedback/InlineAlert.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export interface InlineAlertProps {
+    /** What the message means. `danger` is announced assertively; `info` politely. */
+    tone?: 'info' | 'danger';
+    children: ReactNode;
+}
+/**
+ * A message attached to the thing it is about, rather than to the page.
+ *
+ * 🔴 The tone decides the ARIA role, not just the colour. `danger` becomes `role="alert"`,
+ * which interrupts a screen reader; `info` becomes `role="status"`, which waits its turn.
+ * Six ships wrote this component (three as `InlineAlert`, three as `Alert`) and the choice
+ * of role is precisely the part that is easy to get wrong and invisible when you do.
+ */
+export declare function InlineAlert({ tone, children }: InlineAlertProps): import("react").JSX.Element;

package/dist/feedback/InlineAlert.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../lib/cx.js';
+const TONE_CLASS = {
+    info: 'bg-surface text-text-primary border-border',
+    danger: 'bg-surface text-danger border-danger',
+};
+/**
+ * A message attached to the thing it is about, rather than to the page.
+ *
+ * 🔴 The tone decides the ARIA role, not just the colour. `danger` becomes `role="alert"`,
+ * which interrupts a screen reader; `info` becomes `role="status"`, which waits its turn.
+ * Six ships wrote this component (three as `InlineAlert`, three as `Alert`) and the choice
+ * of role is precisely the part that is easy to get wrong and invisible when you do.
+ */
+export function InlineAlert({ tone = 'info', children }) {
+    return (_jsx("div", { role: tone === 'danger' ? 'alert' : 'status', className: cx('rounded-x-md border p-x-2xs font-sans', TONE_CLASS[tone]), children: children }));
+}
+//# sourceMappingURL=InlineAlert.js.map

package/dist/feedback/InlineAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineAlert.js","sourceRoot":"","sources":["../../src/feedback/InlineAlert.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAQlC,MAAM,UAAU,GAA0D;IACxE,IAAI,EAAE,4CAA4C;IAClD,MAAM,EAAE,sCAAsC;CAC/C,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,QAAQ,EAAoB;IACvE,OAAO,CACL,cACE,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAC5C,SAAS,EAAE,EAAE,CAAC,uCAAuC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,YAEvE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/feedback/ToastProvider.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+export interface ToastProviderProps {
+    /** Localized name for the toast region, e.g. "Notifications". */
+    regionLabel: string;
+    /** Localized label for each toast's dismiss control. */
+    dismissLabel: string;
+    /**
+     * How long a toast stays, in milliseconds.
+     *
+     * 🔴 Five seconds, not the two-and-a-bit the fleet settled on independently (nene-field
+     * 2200ms, nene-deal 2600ms). A toast that vanishes before a screen reader has finished
+     * reading it was never delivered, and 2.2s is not enough for a sentence. Callers can
+     * shorten it per toast if they have a reason.
+     */
+    defaultDurationMs?: number;
+    children: ReactNode;
+}
+/**
+ * Hosts the toast queue and the live regions that announce it.
+ *
+ * 🔴 The live regions are always in the DOM, even with nothing to show. Four ships
+ * (nene-records, nene-field, nene-invoice, nene-deal) each create theirs at the moment the
+ * first toast appears — `nene-deal` even returns `null` when the queue is empty. A live
+ * region that arrives together with its content is frequently not announced at all: the
+ * assistive technology has nothing to have been watching. The toast is on screen, looks
+ * right, and is silent — which is why this survived four independent implementations.
+ *
+ * 🔴 Two regions, not one. `polite` waits for a pause; `danger` needs `assertive`, which
+ * interrupts. Both must pre-exist for the same reason, so both are rendered empty.
+ */
+export declare function ToastProvider({ regionLabel, dismissLabel, defaultDurationMs, children, }: ToastProviderProps): import("react").JSX.Element;

package/dist/feedback/ToastProvider.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { cx } from '../lib/cx.js';
+import { CONTROL_CLASS } from '../lib/states.js';
+import { ToastContext } from './toast-context.js';
+const TONE_CLASS = {
+    info: 'bg-surface-raised text-text-primary border-border',
+    danger: 'bg-surface-raised text-danger border-danger',
+};
+/**
+ * Hosts the toast queue and the live regions that announce it.
+ *
+ * 🔴 The live regions are always in the DOM, even with nothing to show. Four ships
+ * (nene-records, nene-field, nene-invoice, nene-deal) each create theirs at the moment the
+ * first toast appears — `nene-deal` even returns `null` when the queue is empty. A live
+ * region that arrives together with its content is frequently not announced at all: the
+ * assistive technology has nothing to have been watching. The toast is on screen, looks
+ * right, and is silent — which is why this survived four independent implementations.
+ *
+ * 🔴 Two regions, not one. `polite` waits for a pause; `danger` needs `assertive`, which
+ * interrupts. Both must pre-exist for the same reason, so both are rendered empty.
+ */
+export function ToastProvider({ regionLabel, dismissLabel, defaultDurationMs = 5000, children, }) {
+    const [toasts, setToasts] = useState([]);
+    const timers = useRef(new Map());
+    const nextId = useRef(0);
+    const dismiss = useCallback((id) => {
+        const timer = timers.current.get(id);
+        if (timer !== undefined) {
+            clearTimeout(timer);
+            timers.current.delete(id);
+        }
+        setToasts((current) => current.filter((toast) => toast.id !== id));
+    }, []);
+    const show = useCallback((message, options) => {
+        const id = `toast-${(nextId.current += 1)}`;
+        setToasts((current) => [...current, { id, message, tone: options?.tone ?? 'info' }]);
+        timers.current.set(id, setTimeout(() => dismiss(id), options?.durationMs ?? defaultDurationMs));
+        return id;
+    }, [defaultDurationMs, dismiss]);
+    // Timers outlive the component otherwise, and fire setState on an unmounted tree.
+    useEffect(() => {
+        const pending = timers.current;
+        return () => {
+            for (const timer of pending.values())
+                clearTimeout(timer);
+            pending.clear();
+        };
+    }, []);
+    const api = useMemo(() => ({ show, dismiss }), [show, dismiss]);
+    const region = (tone, live) => (_jsx("div", { "aria-live": live, "aria-label": regionLabel, role: "region", className: "flex flex-col gap-x-2xs", children: toasts
+            .filter((toast) => toast.tone === tone)
+            .map((toast) => (_jsxs("div", { className: cx('flex items-start gap-x-2xs rounded-x-md border p-x-2xs font-sans shadow-sm', TONE_CLASS[toast.tone]), children: [_jsx("span", { children: toast.message }), _jsx("button", { type: "button", "aria-label": dismissLabel, onClick: () => dismiss(toast.id), className: cx('rounded-x-md px-x-3xs', CONTROL_CLASS), children: dismissLabel })] }, toast.id))) }));
+    return (_jsxs(ToastContext.Provider, { value: api, children: [children, region('info', 'polite'), region('danger', 'assertive')] }));
+}
+//# sourceMappingURL=ToastProvider.js.map

package/dist/feedback/ToastProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.js","sourceRoot":"","sources":["../../src/feedback/ToastProvider.tsx"],"names":[],"mappings":"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"}

package/dist/feedback/toast-context.d.ts

@@ -0,0 +1,20 @@
+export type ToastTone = 'info' | 'danger';
+export interface ToastOptions {
+    tone?: ToastTone;
+    /** Overrides the provider's default. */
+    durationMs?: number;
+}
+export interface ToastApi {
+    /** Shows a toast and returns its id, so a caller can dismiss it early. */
+    show: (message: string, options?: ToastOptions) => string;
+    dismiss: (id: string) => void;
+}
+export declare const ToastContext: import("react").Context<ToastApi | null>;
+/**
+ * Read the toast API.
+ *
+ * Throws outside a provider rather than returning a no-op: a `show()` that silently does
+ * nothing is a bug that surfaces only when somebody notices a confirmation that never
+ * appeared, which may be never.
+ */
+export declare function useToast(): ToastApi;

package/dist/feedback/toast-context.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+export const ToastContext = createContext(null);
+/**
+ * Read the toast API.
+ *
+ * Throws outside a provider rather than returning a no-op: a `show()` that silently does
+ * nothing is a bug that surfaces only when somebody notices a confirmation that never
+ * appeared, which may be never.
+ */
+export function useToast() {
+    const api = useContext(ToastContext);
+    if (api === null) {
+        throw new Error('useToast must be used inside a <ToastProvider>');
+    }
+    return api;
+}
+//# sourceMappingURL=toast-context.js.map

package/dist/feedback/toast-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-context.js","sourceRoot":"","sources":["../../src/feedback/toast-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAgBlD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAkB,IAAI,CAAC,CAAC;AAEjE;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ;IACtB,MAAM,GAAG,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;IACpE,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/forms/FormField.d.ts

@@ -0,0 +1,47 @@
+import { type ReactNode } from 'react';
+export interface FormFieldProps {
+    /** id of the control this field labels; the control picks it up automatically. */
+    id: string;
+    /** Localized label. */
+    label: string;
+    /** Localized error message, or null when valid. */
+    error?: string | null;
+    /**
+     * Localized help text, shown under the control and read out with it.
+     *
+     * 🔴 Under the control, not beside the label — see `labelAdornment` for that. Three ships
+     * ship a prop called `hint` and they do not agree on where it goes: nene-vault and
+     * nene-profile put it under the control, nene-invoice puts it inside the `<label>`. One
+     * name, two placements, so picking either one silently moves the other's text.
+     */
+    hint?: ReactNode;
+    /** Small node rendered beside the label — a keyboard hint, a unit, a link. */
+    labelAdornment?: ReactNode;
+    /** Marks the control `aria-required`. Carries no visible text of its own. */
+    required?: boolean;
+    /**
+     * Visible required marker, rendered after the label when `required` is set.
+     *
+     * 🔴 Separate from `required` on purpose. `required` is meaning and needs no words;
+     * a marker is presentation and does need them, and the kit ships no strings (principle 4).
+     * Folding the two together would mean the kit picking "*" for every locale.
+     */
+    requiredMarker?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * Labelled form field wrapper: associates a `<label>` with its control, and links the
+ * control to its help text and its validation error.
+ *
+ * 🔴 The control no longer has to opt in. v0.1 documented that the control was "responsible
+ * for setting `aria-describedby`", and the fleet did not do it — nene-vault sets
+ * `aria-invalid` on 3 fields and links the reason zero times (measured 2026-08-23; see
+ * field-context.ts for how that number differs from a raw grep). A field's own error message
+ * is the field's job, so `FormField` publishes the ids through context and the kit's controls
+ * read them. A control from outside the kit still works; it simply gets the label association
+ * it always had.
+ *
+ * 🔴 The hint stays visible when there is an error. nene-profile hides it in that case, and
+ * that is the moment the user most needs it; the error is read first instead.
+ */
+export declare function FormField({ id, label, error, hint, labelAdornment, required, requiredMarker, children, }: FormFieldProps): import("react").JSX.Element;