@hideyukimori/nene2-ui 0.2.0

package/dist/primitives/Switch.d.ts

@@ -0,0 +1,19 @@
+import { type ButtonHTMLAttributes } from 'react';
+export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'type'> {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    /** Localized label. A switch with no name is a mystery toggle. */
+    label: string;
+}
+/**
+ * An on/off control that takes effect immediately.
+ *
+ * 🔴 A `<button role="switch">`, not a styled checkbox. The common shape is an
+ * `<input type="checkbox">` with a sliding track drawn over it, which assistive technology
+ * announces as "checkbox, not checked" — the wrong control, in the wrong tense. A checkbox
+ * states an intention that a later Save applies; a switch *is* the action. Different
+ * meanings get different elements.
+ *
+ * `aria-checked` carries the state; the visible track is decoration on top of it.
+ */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/primitives/Switch.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../lib/cx.js';
+import { CONTROL_CLASS } from '../lib/states.js';
+/**
+ * An on/off control that takes effect immediately.
+ *
+ * 🔴 A `<button role="switch">`, not a styled checkbox. The common shape is an
+ * `<input type="checkbox">` with a sliding track drawn over it, which assistive technology
+ * announces as "checkbox, not checked" — the wrong control, in the wrong tense. A checkbox
+ * states an intention that a later Save applies; a switch *is* the action. Different
+ * meanings get different elements.
+ *
+ * `aria-checked` carries the state; the visible track is decoration on top of it.
+ */
+export const Switch = forwardRef(function Switch({ checked, onCheckedChange, label, className, ...rest }, ref) {
+    return (_jsx("button", { ref: ref, type: "button", role: "switch", "aria-checked": checked, "aria-label": label, onClick: () => onCheckedChange(!checked), className: cx('inline-flex items-center rounded-x-md border border-border px-x-2xs py-x-3xs font-sans', checked ? 'bg-accent text-on-accent' : 'bg-surface text-text-muted', CONTROL_CLASS, className), ...rest, children: label }));
+});
+//# sourceMappingURL=Switch.js.map

package/dist/primitives/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/primitives/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAUjD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CAC9E,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACvD,GAAG;IAEH,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,kBACC,OAAO,gBACT,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,EACxC,SAAS,EAAE,EAAE,CACX,wFAAwF,EACxF,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,4BAA4B,EACnE,aAAa,EACb,SAAS,CACV,KACG,IAAI,YAEP,KAAK,GACC,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/primitives/Text.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface TextProps {
+    as?: 'p' | 'span';
+    tone?: 'primary' | 'muted';
+    children: ReactNode;
+}
+export declare function Text({ as, tone, children }: TextProps): import("react").JSX.Element;

package/dist/primitives/Text.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Text({ as = 'p', tone = 'primary', children }) {
+    const className = `font-sans ${tone === 'muted' ? 'text-text-muted' : 'text-text-primary'}`;
+    return as === 'span' ? (_jsx("span", { className: className, children: children })) : (_jsx("p", { className: className, children: children }));
+}
+//# sourceMappingURL=Text.js.map

package/dist/primitives/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/primitives/Text.tsx"],"names":[],"mappings":";AAQA,MAAM,UAAU,IAAI,CAAC,EAAE,EAAE,GAAG,GAAG,EAAE,IAAI,GAAG,SAAS,EAAE,QAAQ,EAAa;IACtE,MAAM,SAAS,GAAG,aAAa,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,mBAAmB,EAAE,CAAC;IAE5F,OAAO,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,CACrB,eAAM,SAAS,EAAE,SAAS,YAAG,QAAQ,GAAQ,CAC9C,CAAC,CAAC,CAAC,CACF,YAAG,SAAS,EAAE,SAAS,YAAG,QAAQ,GAAK,CACxC,CAAC;AACJ,CAAC"}

package/dist/primitives/Textarea.d.ts

@@ -0,0 +1,11 @@
+import { type TextareaHTMLAttributes } from 'react';
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+/**
+ * Multi-line text input. Deliberately identical to `Input` apart from the element, so the
+ * two never drift: five ships wrote their own `Textarea.tsx` and the kit shipped without
+ * one, which is how a control ends up with five different focus rings.
+ *
+ * No `rows` default and no auto-resize — height is a screen's decision, and every ship that
+ * wanted one set it on the element already.
+ */
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/primitives/Textarea.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../lib/cx.js';
+import { CONTROL_CLASS } from '../lib/states.js';
+import { useFieldWiring } from '../forms/field-context.js';
+const BASE_CLASS = `w-full rounded-x-md border border-border bg-surface-raised px-x-inline-sm py-x-stack-sm font-sans text-text-primary placeholder:text-text-muted ${CONTROL_CLASS}`;
+/**
+ * Multi-line text input. Deliberately identical to `Input` apart from the element, so the
+ * two never drift: five ships wrote their own `Textarea.tsx` and the kit shipped without
+ * one, which is how a control ends up with five different focus rings.
+ *
+ * No `rows` default and no auto-resize — height is a screen's decision, and every ship that
+ * wanted one set it on the element already.
+ */
+export const Textarea = forwardRef(function Textarea({ className, id, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-required': ariaRequired, ...rest }, ref) {
+    const wiring = useFieldWiring({ id, ariaInvalid, ariaDescribedBy, ariaRequired });
+    return _jsx("textarea", { ref: ref, className: cx(BASE_CLASS, className), ...wiring, ...rest });
+});
+//# sourceMappingURL=Textarea.js.map

package/dist/primitives/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/primitives/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA+B,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,MAAM,UAAU,GAAG,mJAAmJ,aAAa,EAAE,CAAC;AAEtL;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAqC,SAAS,QAAQ,CACtF,EACE,SAAS,EACT,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;IAElF,OAAO,mBAAU,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,MAAM,KAAM,IAAI,GAAI,CAAC;AAC5F,CAAC,CAAC,CAAC"}

package/dist/states/EmptyState.d.ts

@@ -0,0 +1,5 @@
+export interface EmptyStateProps {
+    /** Localized message. The kit never ships strings — see README. */
+    message: string;
+}
+export declare function EmptyState({ message }: EmptyStateProps): import("react").JSX.Element;

package/dist/states/EmptyState.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function EmptyState({ message }) {
+    return (_jsx("div", { className: "py-x-stack-lg font-sans text-text-muted", role: "status", children: message }));
+}
+//# sourceMappingURL=EmptyState.js.map

package/dist/states/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../src/states/EmptyState.tsx"],"names":[],"mappings":";AAKA,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAmB;IACrD,OAAO,CACL,cAAK,SAAS,EAAC,yCAAyC,EAAC,IAAI,EAAC,QAAQ,YACnE,OAAO,GACJ,CACP,CAAC;AACJ,CAAC"}

package/dist/states/ErrorState.d.ts

@@ -0,0 +1,8 @@
+export interface ErrorStateProps {
+    /** Localized message. */
+    message: string;
+    /** Localized label for the retry control. */
+    retryLabel: string;
+    onRetry: () => void;
+}
+export declare function ErrorState({ message, retryLabel, onRetry }: ErrorStateProps): import("react").JSX.Element;

package/dist/states/ErrorState.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../primitives/Button.js';
+export function ErrorState({ message, retryLabel, onRetry }) {
+    return (_jsxs("div", { className: "py-x-stack-lg", role: "alert", children: [_jsx("p", { className: "font-sans text-danger", children: message }), _jsx("div", { className: "py-x-stack-sm", children: _jsx(Button, { variant: "secondary", onClick: onRetry, children: retryLabel }) })] }));
+}
+//# sourceMappingURL=ErrorState.js.map

package/dist/states/ErrorState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../src/states/ErrorState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAUjD,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAmB;IAC1E,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,aACzC,YAAG,SAAS,EAAC,uBAAuB,YAAE,OAAO,GAAK,EAClD,cAAK,SAAS,EAAC,eAAe,YAC5B,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,YACzC,UAAU,GACJ,GACL,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/states/LoadingState.d.ts

@@ -0,0 +1,18 @@
+export interface LoadingStateProps {
+    /** Localized message announced while the work is in flight. */
+    label: string;
+}
+/**
+ * The third of the three states.
+ *
+ * 🔴 The kit's own README says these ship as a set — "so a screen that handles only the
+ * happy path is visibly incomplete" — and then v0.1 shipped `EmptyState` and `ErrorState`
+ * without this one. Five ships wrote their own. A set documented as a set and delivered
+ * short is worse than no set: every screen author reads the principle, looks for the part,
+ * and writes their own.
+ *
+ * 🔴 The wrapper carries no `role="status"`. `Spinner` renders an `<output aria-live>`,
+ * and a live region wrapped in another live region is announced twice. `aria-busy` marks
+ * the region as in-flight without adding a second announcer.
+ */
+export declare function LoadingState({ label }: LoadingStateProps): import("react").JSX.Element;

package/dist/states/LoadingState.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Spinner } from '../primitives/Spinner.js';
+/**
+ * The third of the three states.
+ *
+ * 🔴 The kit's own README says these ship as a set — "so a screen that handles only the
+ * happy path is visibly incomplete" — and then v0.1 shipped `EmptyState` and `ErrorState`
+ * without this one. Five ships wrote their own. A set documented as a set and delivered
+ * short is worse than no set: every screen author reads the principle, looks for the part,
+ * and writes their own.
+ *
+ * 🔴 The wrapper carries no `role="status"`. `Spinner` renders an `<output aria-live>`,
+ * and a live region wrapped in another live region is announced twice. `aria-busy` marks
+ * the region as in-flight without adding a second announcer.
+ */
+export function LoadingState({ label }) {
+    return (_jsx("div", { className: "py-x-stack-lg", "aria-busy": "true", children: _jsx(Spinner, { label: label }) }));
+}
+//# sourceMappingURL=LoadingState.js.map

package/dist/states/LoadingState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.js","sourceRoot":"","sources":["../../src/states/LoadingState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAOnD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAqB;IACvD,OAAO,CACL,cAAK,SAAS,EAAC,eAAe,eAAW,MAAM,YAC7C,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,GAAI,GACrB,CACP,CAAC;AACJ,CAAC"}

package/dist/theme/tokens.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Read-only TS accessors for theme tokens, for programmatic use such as charts where a
+ * CSS class cannot be applied.
+ *
+ * 🔴 These are `var()` references, never literal values — the CSS `@theme` block stays
+ * the single source of truth. Adding a literal here creates a second source that drifts.
+ */
+export declare const tokens: {
+    readonly color: {
+        readonly accent: "var(--color-accent)";
+        readonly danger: "var(--color-danger)";
+        readonly surface: "var(--color-surface)";
+        readonly surfaceRaised: "var(--color-surface-raised)";
+        readonly border: "var(--color-border)";
+        readonly textPrimary: "var(--color-text-primary)";
+        readonly textMuted: "var(--color-text-muted)";
+        readonly onAccent: "var(--color-on-accent)";
+    };
+};

package/dist/theme/tokens.js

@@ -0,0 +1,20 @@
+/**
+ * Read-only TS accessors for theme tokens, for programmatic use such as charts where a
+ * CSS class cannot be applied.
+ *
+ * 🔴 These are `var()` references, never literal values — the CSS `@theme` block stays
+ * the single source of truth. Adding a literal here creates a second source that drifts.
+ */
+export const tokens = {
+    color: {
+        accent: 'var(--color-accent)',
+        danger: 'var(--color-danger)',
+        surface: 'var(--color-surface)',
+        surfaceRaised: 'var(--color-surface-raised)',
+        border: 'var(--color-border)',
+        textPrimary: 'var(--color-text-primary)',
+        textMuted: 'var(--color-text-muted)',
+        onAccent: 'var(--color-on-accent)',
+    },
+};
+//# sourceMappingURL=tokens.js.map

package/dist/theme/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,KAAK,EAAE;QACL,MAAM,EAAE,qBAAqB;QAC7B,MAAM,EAAE,qBAAqB;QAC7B,OAAO,EAAE,sBAAsB;QAC/B,aAAa,EAAE,6BAA6B;QAC5C,MAAM,EAAE,qBAAqB;QAC7B,WAAW,EAAE,2BAA2B;QACxC,SAAS,EAAE,yBAAyB;QACpC,QAAQ,EAAE,wBAAwB;KACnC;CACO,CAAC"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@hideyukimori/nene2-ui",
+  "version": "0.2.0",
+  "description": "NeNe fleet shared React UI kit — token-driven primitives on Tailwind v4 @theme. Components carry no design of their own; themes do.",
+  "type": "module",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./themes/default.css": "./themes/default.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "themes"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "tsc --build",
+    "prepack": "tsc --build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hideyukiMORI/nene2-fleet-tooling.git",
+    "directory": "packages/nene2-ui"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "tailwindcss": ">=4"
+  }
+}

package/themes/default.css

@@ -0,0 +1,60 @@
+/* @nene2-contract 1.0 @themegen 1.0.0
+ *
+ * The kit's default theme. Promoted verbatim from nene-payout — the fleet's only
+ * conformance-violation-free product as of 2026-08-23.
+ *
+ * 🔴 This file is the ONLY place a design value may appear. Components reference these
+ * through Tailwind utilities (bg-accent, rounded-x-md, px-x-inline-md). To rebrand,
+ * replace this file — never edit a component.
+ *
+ * Regenerate with: npx @hideyukimori/nene2-tokens themegen
+ */
+@theme {
+  --color-surface: oklch(99% 0.004 260);
+  --color-surface-raised: oklch(100% 0 0);
+  --color-text-primary: oklch(25% 0.02 260);
+  --color-text-muted: oklch(55% 0.02 260);
+  --color-border: oklch(90% 0.01 260);
+  --color-accent: oklch(55% 0.15 250);
+  --color-on-accent: oklch(99% 0 0);
+  --color-danger: oklch(55% 0.2 25);
+
+  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.06);
+
+  /* Sentinel for the consumer's build (#316). Zero-width, so applying it does nothing.
+   * Its only job is to exist: `p-x-source-probe` appears nowhere except this kit's `dist`,
+   * so a build that generates it has the kit in its `@source`, and a build that does not
+   * has silently dropped every class the kit ships. See SOURCE_PROBE_CLASS. */
+  --spacing-x-source-probe: 0px;
+
+  /* Disabled controls. A value, so it lives here rather than in a component — the same rule
+   * the colours follow. 50% is what the fleet's screens most often reached for when the kit
+   * gave them nothing (50 x10, 40 x4, 30 x6, measured 2026-08-23 across 20 uses). */
+  --opacity-x-disabled: 50%;
+
+  --radius-x-md: 0.5rem;
+
+  /* The spacing scale. Nine steps, chosen by measurement rather than taste: snapping the
+   * 944 spacing utilities the fleet writes by hand onto these nine moves 98.2% of them by
+   * 2px or less (2026-08-23, #298). See src/lib/spacing.ts.
+   *
+   * 🔴 No step may be named numerically (`x-2`) — `gap-x-2` is Tailwind's own column-gap
+   * utility and would take precedence. */
+  --spacing-x-3xs: 0.25rem;
+  --spacing-x-2xs: 0.5rem;
+  --spacing-x-xs: 0.75rem;
+  --spacing-x-sm: 1rem;
+  --spacing-x-md: 1.25rem;
+  --spacing-x-lg: 1.5rem;
+  --spacing-x-xl: 2rem;
+  --spacing-x-2xl: 3rem;
+
+  /* Semantic names used by the primitives that shipped in v0.1. They are aliases, never
+   * second values — two names holding the same literal is exactly the drift this file
+   * exists to prevent. Rebranding still means editing the scale above, once. */
+  --spacing-x-inline-sm: var(--spacing-x-2xs);
+  --spacing-x-inline-md: var(--spacing-x-sm);
+  --spacing-x-stack-sm: var(--spacing-x-xs);
+  --spacing-x-stack-md: var(--spacing-x-md);
+  --spacing-x-stack-lg: var(--spacing-x-xl);
+}