@hideyukimori/nene2-ui 0.2.0

package/dist/forms/FormField.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { FieldContext } from './field-context.js';
+/**
+ * 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 function FormField({ id, label, error = null, hint, labelAdornment, required = false, requiredMarker, children, }) {
+    const errorId = error === null ? null : `${id}-error`;
+    const hintId = hint === undefined || hint === null ? null : `${id}-hint`;
+    const value = useMemo(() => ({ id, errorId, hintId, required }), [id, errorId, hintId, required]);
+    return (_jsx(FieldContext.Provider, { value: value, children: _jsxs("div", { className: "flex flex-col gap-x-inline-sm", children: [_jsxs("label", { htmlFor: id, className: "font-sans font-medium text-text-primary", children: [label, required && requiredMarker !== undefined && requiredMarker !== null ? (_jsx("span", { className: "text-danger", children: requiredMarker })) : null, labelAdornment] }), children, hintId === null ? null : (_jsx("span", { id: hintId, className: "font-sans text-text-muted", children: hint })), errorId === null ? null : (_jsx("p", { id: errorId, role: "alert", className: "font-sans text-danger", children: error }))] }) }));
+}
+//# sourceMappingURL=FormField.js.map

package/dist/forms/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/forms/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAiClD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,EAAE,EACF,KAAK,EACL,KAAK,GAAG,IAAI,EACZ,IAAI,EACJ,cAAc,EACd,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,QAAQ,GACO;IACf,MAAM,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC;IACtD,MAAM,MAAM,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC;IACzE,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAElG,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACjC,eAAK,SAAS,EAAC,+BAA+B,aAC5C,iBAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAC,yCAAyC,aACpE,KAAK,EACL,QAAQ,IAAI,cAAc,KAAK,SAAS,IAAI,cAAc,KAAK,IAAI,CAAC,CAAC,CAAC,CACrE,eAAM,SAAS,EAAC,aAAa,YAAE,cAAc,GAAQ,CACtD,CAAC,CAAC,CAAC,IAAI,EACP,cAAc,IACT,EACP,QAAQ,EACR,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACxB,eAAM,EAAE,EAAE,MAAM,EAAE,SAAS,EAAC,2BAA2B,YACpD,IAAI,GACA,CACR,EACA,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACzB,YAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,uBAAuB,YAC3D,KAAK,GACJ,CACL,IACG,GACgB,CACzB,CAAC;AACJ,CAAC"}

package/dist/forms/field-context.d.ts

@@ -0,0 +1,54 @@
+import { type AriaAttributes } from 'react';
+export interface FieldContextValue {
+    /** id the label points at, and the control must carry. */
+    id: string;
+    /** id of the rendered error message, or null when the field is valid. */
+    errorId: string | null;
+    /** id of the rendered hint, or null when there is no hint. */
+    hintId: string | null;
+    /** Whether the field must be filled in. */
+    required: boolean;
+}
+export declare const FieldContext: import("react").Context<FieldContextValue | null>;
+export interface FieldWiring {
+    id?: string | undefined;
+    'aria-invalid'?: AriaAttributes['aria-invalid'] | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-required'?: AriaAttributes['aria-required'] | undefined;
+}
+/**
+ * Wire a control to the `FormField` around it.
+ *
+ * 🔴 Why this is not the caller's job, though v0.1 said it was. `FormField` used to carry
+ * this in a doc comment:
+ *
+ *   > The control is responsible for setting aria-describedby={`${id}-error`} when it
+ *   > renders an error
+ *
+ * Measured across the fleet on 2026-08-23, that delegation did not hold. nene-vault — the
+ * first ship scheduled for migration — sets `aria-invalid` on **3 fields** and links the
+ * reason **zero times**: assistive technology is told the field is wrong and never told
+ * why. nene-payout sets it on 26 fields and links the reason zero times as well.
+ *
+ * (Counted as JSX props only. A plain `grep -r aria-invalid` over nene-vault's frontend
+ * returns 14, not 3: the other eleven are 8 test assertions, 2 comment lines and 1 Tailwind
+ * `aria-invalid:` variant selector. Likewise nene-payout's single `aria-describedby` hit is
+ * a comment, so its real count is zero, not one. Both of those wrong numbers reached a draft
+ * of this comment — written down here so the next person to recount lands on the same one.)
+ *
+ * 🔴 The same is true of hints. nene-invoice, nene-vault and nene-profile each render one,
+ * and none of the three links it — so the help text is visible and never read out. The kit
+ * puts both ids on the control, the error first, because once a field is wrong the reason
+ * matters more than the advice.
+ *
+ * A contract a component states in prose and leaves to its callers is a contract that will
+ * be half-kept. The kit knows the ids, so the kit does the wiring.
+ *
+ * Explicit props always win — a caller with its own error region can still say so.
+ */
+export declare function useFieldWiring(explicit: {
+    id?: string | undefined;
+    ariaInvalid?: AriaAttributes['aria-invalid'] | undefined;
+    ariaDescribedBy?: string | undefined;
+    ariaRequired?: AriaAttributes['aria-required'] | undefined;
+}): FieldWiring;

package/dist/forms/field-context.js

@@ -0,0 +1,51 @@
+import { createContext, useContext } from 'react';
+export const FieldContext = createContext(null);
+/**
+ * Wire a control to the `FormField` around it.
+ *
+ * 🔴 Why this is not the caller's job, though v0.1 said it was. `FormField` used to carry
+ * this in a doc comment:
+ *
+ *   > The control is responsible for setting aria-describedby={`${id}-error`} when it
+ *   > renders an error
+ *
+ * Measured across the fleet on 2026-08-23, that delegation did not hold. nene-vault — the
+ * first ship scheduled for migration — sets `aria-invalid` on **3 fields** and links the
+ * reason **zero times**: assistive technology is told the field is wrong and never told
+ * why. nene-payout sets it on 26 fields and links the reason zero times as well.
+ *
+ * (Counted as JSX props only. A plain `grep -r aria-invalid` over nene-vault's frontend
+ * returns 14, not 3: the other eleven are 8 test assertions, 2 comment lines and 1 Tailwind
+ * `aria-invalid:` variant selector. Likewise nene-payout's single `aria-describedby` hit is
+ * a comment, so its real count is zero, not one. Both of those wrong numbers reached a draft
+ * of this comment — written down here so the next person to recount lands on the same one.)
+ *
+ * 🔴 The same is true of hints. nene-invoice, nene-vault and nene-profile each render one,
+ * and none of the three links it — so the help text is visible and never read out. The kit
+ * puts both ids on the control, the error first, because once a field is wrong the reason
+ * matters more than the advice.
+ *
+ * A contract a component states in prose and leaves to its callers is a contract that will
+ * be half-kept. The kit knows the ids, so the kit does the wiring.
+ *
+ * Explicit props always win — a caller with its own error region can still say so.
+ */
+export function useFieldWiring(explicit) {
+    const field = useContext(FieldContext);
+    if (field === null) {
+        return {
+            id: explicit.id,
+            'aria-invalid': explicit.ariaInvalid,
+            'aria-describedby': explicit.ariaDescribedBy,
+            'aria-required': explicit.ariaRequired,
+        };
+    }
+    const described = [field.errorId, field.hintId].filter((v) => v !== null).join(' ');
+    return {
+        id: explicit.id ?? field.id,
+        'aria-invalid': explicit.ariaInvalid ?? (field.errorId === null ? undefined : true),
+        'aria-describedby': explicit.ariaDescribedBy ?? (described === '' ? undefined : described),
+        'aria-required': explicit.ariaRequired ?? (field.required ? true : undefined),
+    };
+}
+//# sourceMappingURL=field-context.js.map

package/dist/forms/field-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-context.js","sourceRoot":"","sources":["../../src/forms/field-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAavE,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAW1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,cAAc,CAAC,QAK9B;IACC,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEvC,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;QACnB,OAAO;YACL,EAAE,EAAE,QAAQ,CAAC,EAAE;YACf,cAAc,EAAE,QAAQ,CAAC,WAAW;YACpC,kBAAkB,EAAE,QAAQ,CAAC,eAAe;YAC5C,eAAe,EAAE,QAAQ,CAAC,YAAY;SACvC,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAe,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEjG,OAAO;QACL,EAAE,EAAE,QAAQ,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE;QAC3B,cAAc,EAAE,QAAQ,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;QACnF,kBAAkB,EAAE,QAAQ,CAAC,eAAe,IAAI,CAAC,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;QAC1F,eAAe,EAAE,QAAQ,CAAC,YAAY,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;KAC9E,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+export { Button, type ButtonProps } from './primitives/Button.js';
+export { Input, type InputProps } from './primitives/Input.js';
+export { Select, type SelectProps } from './primitives/Select.js';
+export { Spinner, type SpinnerProps } from './primitives/Spinner.js';
+export { Text, type TextProps } from './primitives/Text.js';
+export { Textarea, type TextareaProps } from './primitives/Textarea.js';
+export { Icon, type IconProps } from './primitives/Icon.js';
+export { Checkbox, type CheckboxProps } from './primitives/Checkbox.js';
+export { Radio, type RadioProps } from './primitives/Radio.js';
+export { Switch, type SwitchProps } from './primitives/Switch.js';
+export { PageHeader, type PageHeaderProps } from './layout/PageHeader.js';
+export { Stack, type StackProps } from './layout/Stack.js';
+export { Grid, type GridProps } from './layout/Grid.js';
+export { Box, type BoxProps } from './layout/Box.js';
+export { Section, type SectionProps } from './layout/Section.js';
+export { Card, type CardProps } from './layout/Card.js';
+export type { Space, Responsive } from './lib/spacing.js';
+export { FormField, type FormFieldProps } from './forms/FormField.js';
+export { LoadingState, type LoadingStateProps } from './states/LoadingState.js';
+export { EmptyState, type EmptyStateProps } from './states/EmptyState.js';
+export { ErrorState, type ErrorStateProps } from './states/ErrorState.js';
+export { Modal, type ModalProps } from './overlay/Modal.js';
+export { ConfirmDialog, type ConfirmDialogProps } from './overlay/ConfirmDialog.js';
+export { Badge, type BadgeProps } from './feedback/Badge.js';
+export { InlineAlert, type InlineAlertProps } from './feedback/InlineAlert.js';
+export { ToastProvider, type ToastProviderProps } from './feedback/ToastProvider.js';
+export { useToast, type ToastApi, type ToastOptions, type ToastTone, } from './feedback/toast-context.js';
+export { DetailList, type DetailListProps, type DetailRow } from './data/DetailList.js';
+export { DataTable, type DataTableProps, type DataColumn } from './data/DataTable.js';
+export { Pagination, type PaginationProps } from './data/Pagination.js';
+export { tokens } from './theme/tokens.js';
+export { cx } from './lib/cx.js';
+export { CONTROL_CLASS, DISABLED_CLASS, FOCUS_CLASS } from './lib/states.js';
+export { SOURCE_PROBE_CLASS } from './lib/source-probe.js';

package/dist/index.js

@@ -0,0 +1,47 @@
+// Primitives
+export { Button } from './primitives/Button.js';
+export { Input } from './primitives/Input.js';
+export { Select } from './primitives/Select.js';
+export { Spinner } from './primitives/Spinner.js';
+export { Text } from './primitives/Text.js';
+export { Textarea } from './primitives/Textarea.js';
+export { Icon } from './primitives/Icon.js';
+export { Checkbox } from './primitives/Checkbox.js';
+export { Radio } from './primitives/Radio.js';
+export { Switch } from './primitives/Switch.js';
+// Layout
+export { PageHeader } from './layout/PageHeader.js';
+export { Stack } from './layout/Stack.js';
+export { Grid } from './layout/Grid.js';
+export { Box } from './layout/Box.js';
+export { Section } from './layout/Section.js';
+export { Card } from './layout/Card.js';
+// Forms
+export { FormField } from './forms/FormField.js';
+// States — the three ship together (design principle 5). Adding a fourth screen state
+// means adding it here, or the set stops being a set.
+export { LoadingState } from './states/LoadingState.js';
+export { EmptyState } from './states/EmptyState.js';
+export { ErrorState } from './states/ErrorState.js';
+// Overlay
+export { Modal } from './overlay/Modal.js';
+export { ConfirmDialog } from './overlay/ConfirmDialog.js';
+// Feedback
+export { Badge } from './feedback/Badge.js';
+export { InlineAlert } from './feedback/InlineAlert.js';
+export { ToastProvider } from './feedback/ToastProvider.js';
+export { useToast, } from './feedback/toast-context.js';
+// Data
+export { DetailList } from './data/DetailList.js';
+export { DataTable } from './data/DataTable.js';
+export { Pagination } from './data/Pagination.js';
+// Theme
+export { tokens } from './theme/tokens.js';
+// Internal helpers, exported so downstream components can compose consistently.
+export { cx } from './lib/cx.js';
+// Controls the kit does not ship yet (Textarea has 7 independent implementations in the
+// fleet) can at least carry the same focus and disabled behaviour instead of inventing it.
+export { CONTROL_CLASS, DISABLED_CLASS, FOCUS_CLASS } from './lib/states.js';
+// Lets a consumer's build prove the kit is in its Tailwind `@source` (#316).
+export { SOURCE_PROBE_CLASS } from './lib/source-probe.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,aAAa;AACb,OAAO,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,KAAK,EAAmB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAqB,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,IAAI,EAAkB,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,IAAI,EAAkB,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,KAAK,EAAmB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAElE,SAAS;AACT,OAAO,EAAE,UAAU,EAAwB,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAmB,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAkB,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,GAAG,EAAiB,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAqB,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,IAAI,EAAkB,MAAM,kBAAkB,CAAC;AAKxD,QAAQ;AACR,OAAO,EAAE,SAAS,EAAuB,MAAM,sBAAsB,CAAC;AAEtE,sFAAsF;AACtF,sDAAsD;AACtD,OAAO,EAAE,YAAY,EAA0B,MAAM,0BAA0B,CAAC;AAChF,OAAO,EAAE,UAAU,EAAwB,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAwB,MAAM,wBAAwB,CAAC;AAE1E,UAAU;AACV,OAAO,EAAE,KAAK,EAAmB,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAA2B,MAAM,4BAA4B,CAAC;AAEpF,WAAW;AACX,OAAO,EAAE,KAAK,EAAmB,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAyB,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EAAE,aAAa,EAA2B,MAAM,6BAA6B,CAAC;AACrF,OAAO,EACL,QAAQ,GAIT,MAAM,6BAA6B,CAAC;AAErC,OAAO;AACP,OAAO,EAAE,UAAU,EAAwC,MAAM,sBAAsB,CAAC;AACxF,OAAO,EAAE,SAAS,EAAwC,MAAM,qBAAqB,CAAC;AACtF,OAAO,EAAE,UAAU,EAAwB,MAAM,sBAAsB,CAAC;AAExE,QAAQ;AACR,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,gFAAgF;AAChF,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,wFAAwF;AACxF,2FAA2F;AAC3F,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7E,6EAA6E;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/layout/Box.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type Responsive, type Space } from '../lib/spacing.js';
+export interface BoxProps extends HTMLAttributes<HTMLDivElement> {
+    /** Padding on all four sides. `padX` / `padY` win over it, the way `px-*` wins over `p-*`. */
+    pad?: Responsive<Space>;
+    padX?: Responsive<Space>;
+    padY?: Responsive<Space>;
+    children?: ReactNode;
+}
+/**
+ * A plain block that carries padding from the scale and nothing else.
+ *
+ * 🔴 There are deliberately no `w` / `h` props, though the fleet writes 241 sizing
+ * utilities by hand. Width is usually a fact about one screen's layout rather than a shared
+ * design decision, and the measured values say so: 241 uses spread across 76 distinct
+ * classes (`w-24`, `w-56`, `min-w-160`, `w-3.75`…). Turning that into a prop would reopen
+ * the value channel this kit exists to close, and would absorb almost nothing. Sizing stays
+ * in the caller's `className`, where it is at least visible to a linter.
+ */
+export declare function Box({ pad, padX, padY, children, className, ...rest }: BoxProps): import("react").JSX.Element;

package/dist/layout/Box.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../lib/cx.js';
+import { PAD, PAD_X, PAD_Y, resolve } from '../lib/spacing.js';
+/**
+ * A plain block that carries padding from the scale and nothing else.
+ *
+ * 🔴 There are deliberately no `w` / `h` props, though the fleet writes 241 sizing
+ * utilities by hand. Width is usually a fact about one screen's layout rather than a shared
+ * design decision, and the measured values say so: 241 uses spread across 76 distinct
+ * classes (`w-24`, `w-56`, `min-w-160`, `w-3.75`…). Turning that into a prop would reopen
+ * the value channel this kit exists to close, and would absorb almost nothing. Sizing stays
+ * in the caller's `className`, where it is at least visible to a linter.
+ */
+export function Box({ pad, padX, padY, children, className, ...rest }) {
+    return (_jsx("div", { className: cx(resolve(pad, PAD), resolve(padX, PAD_X), resolve(padY, PAD_Y), className), ...rest, children: children }));
+}
+//# sourceMappingURL=Box.js.map

package/dist/layout/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../src/layout/Box.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAA+B,MAAM,mBAAmB,CAAC;AAU5F;;;;;;;;;GASG;AACH,MAAM,UAAU,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAY;IAC7E,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC,KACnF,IAAI,YAEP,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/layout/Card.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type Responsive, type Space } from '../lib/spacing.js';
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    pad?: Responsive<Space>;
+    gap?: Responsive<Space>;
+    /** Lift the card off the page. Off by default — a page of shadows reads as no shadows. */
+    raised?: boolean;
+    children: ReactNode;
+}
+/**
+ * A bounded surface: background, hairline border, corner radius, padding.
+ *
+ * Surface, border and radius come from the theme and are not props — a card that could be
+ * given its own colour would be a `div` with extra steps.
+ */
+export declare function Card({ pad, gap, raised, children, className, ...rest }: CardProps): import("react").JSX.Element;

package/dist/layout/Card.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../lib/cx.js';
+import { GAP, PAD, resolve } from '../lib/spacing.js';
+/**
+ * A bounded surface: background, hairline border, corner radius, padding.
+ *
+ * Surface, border and radius come from the theme and are not props — a card that could be
+ * given its own colour would be a `div` with extra steps.
+ */
+export function Card({ pad = 'sm', gap, raised = false, children, className, ...rest }) {
+    return (_jsx("div", { className: cx('flex flex-col bg-surface-raised border border-border rounded-x-md', raised && 'shadow-sm', resolve(pad, PAD), resolve(gap, GAP), className), ...rest, children: children }));
+}
+//# sourceMappingURL=Card.js.map

package/dist/layout/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/layout/Card.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAA+B,MAAM,mBAAmB,CAAC;AAUnF;;;;;GAKG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,GAAG,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAa;IAC/F,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,mEAAmE,EACnE,MAAM,IAAI,WAAW,EACrB,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,EACjB,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,EACjB,SAAS,CACV,KACG,IAAI,YAEP,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/layout/Grid.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type Responsive, type Space } from '../lib/spacing.js';
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Column count, optionally per breakpoint: `cols={{ base: 1, sm: 2 }}`.
+     *
+     * Responsive is not a nicety here. `sm:grid-cols-2` is the single most common
+     * breakpoint-qualified class in the fleet (14 uses); a `Grid` that could not express it
+     * would simply not be adopted.
+     */
+    cols?: Responsive<number>;
+    gap?: Responsive<Space>;
+    children: ReactNode;
+}
+export declare function Grid({ cols, gap, children, className, ...rest }: GridProps): import("react").JSX.Element;

package/dist/layout/Grid.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../lib/cx.js';
+import { COLS, GAP, resolve } from '../lib/spacing.js';
+export function Grid({ cols = 1, gap, children, className, ...rest }) {
+    return (_jsx("div", { className: cx('grid', resolve(cols, COLS), resolve(gap, GAP), className), ...rest, children: children }));
+}
+//# sourceMappingURL=Grid.js.map

package/dist/layout/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../src/layout/Grid.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAA+B,MAAM,mBAAmB,CAAC;AAepF,MAAM,UAAU,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAa;IAC7E,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,SAAS,CAAC,KAAM,IAAI,YACpF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/layout/PageHeader.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface PageHeaderProps {
+    /** Localized page title. */
+    title: string;
+    actions?: ReactNode;
+}
+export declare function PageHeader({ title, actions }: PageHeaderProps): import("react").JSX.Element;

package/dist/layout/PageHeader.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function PageHeader({ title, actions }) {
+    return (_jsxs("header", { className: "flex items-center justify-between py-x-stack-md", children: [_jsx("h1", { className: "font-sans font-medium text-text-primary", children: title }), actions] }));
+}
+//# sourceMappingURL=PageHeader.js.map

package/dist/layout/PageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/layout/PageHeader.tsx"],"names":[],"mappings":";AAQA,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,OAAO,EAAmB;IAC5D,OAAO,CACL,kBAAQ,SAAS,EAAC,iDAAiD,aACjE,aAAI,SAAS,EAAC,yCAAyC,YAAE,KAAK,GAAM,EACnE,OAAO,IACD,CACV,CAAC;AACJ,CAAC"}

package/dist/layout/Section.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type Responsive, type Space } from '../lib/spacing.js';
+export interface SectionProps extends HTMLAttributes<HTMLElement> {
+    pad?: Responsive<Space>;
+    /** Rhythm between the section's own blocks. */
+    gap?: Responsive<Space>;
+    children: ReactNode;
+}
+/**
+ * A titled region of a page: a real `<section>` that stacks its children vertically.
+ *
+ * The defaults are the fleet's two most-written padding and gap values (`p-4` and `gap-3`
+ * measured across 749 hand-written uses), so the common case needs no props at all —
+ * which is the only way a shared component actually gets used.
+ */
+export declare function Section({ pad, gap, children, className, ...rest }: SectionProps): import("react").JSX.Element;

package/dist/layout/Section.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../lib/cx.js';
+import { GAP, PAD, resolve } from '../lib/spacing.js';
+/**
+ * A titled region of a page: a real `<section>` that stacks its children vertically.
+ *
+ * The defaults are the fleet's two most-written padding and gap values (`p-4` and `gap-3`
+ * measured across 749 hand-written uses), so the common case needs no props at all —
+ * which is the only way a shared component actually gets used.
+ */
+export function Section({ pad = 'sm', gap = 'xs', children, className, ...rest }) {
+    return (_jsx("section", { className: cx('flex flex-col', resolve(pad, PAD), resolve(gap, GAP), className), ...rest, children: children }));
+}
+//# sourceMappingURL=Section.js.map

package/dist/layout/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../src/layout/Section.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAA+B,MAAM,mBAAmB,CAAC;AASnF;;;;;;GAMG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,GAAG,GAAG,IAAI,EAAE,GAAG,GAAG,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAgB;IAC5F,OAAO,CACL,kBACE,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,SAAS,CAAC,KAC3E,IAAI,YAEP,QAAQ,GACD,CACX,CAAC;AACJ,CAAC"}

package/dist/layout/Stack.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type Responsive, type Space } from '../lib/spacing.js';
+export interface StackProps extends HTMLAttributes<HTMLDivElement> {
+    /** Main axis. Vertical by default — the common case, and the one `space-y-*` was used for. */
+    direction?: 'vertical' | 'horizontal';
+    gap?: Responsive<Space>;
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'between';
+    wrap?: boolean;
+    /**
+     * Hairline between children.
+     *
+     * 🔴 This exists to absorb `last:border-b-0` / `last:pb-0` / `first:pt-0`, which the fleet
+     * writes 10 times. Those are not screen decisions — they are a list component leaking its
+     * seams into the caller. The kit owns the seams instead of taking them as props.
+     */
+    divider?: boolean;
+    children: ReactNode;
+}
+export declare function Stack({ direction, gap, align, justify, wrap, divider, children, className, ...rest }: StackProps): import("react").JSX.Element;

package/dist/layout/Stack.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../lib/cx.js';
+import { GAP, resolve } from '../lib/spacing.js';
+const ALIGN = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+    baseline: 'items-baseline',
+};
+const JUSTIFY = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+};
+const DIVIDER = {
+    vertical: 'divide-y divide-border',
+    horizontal: 'divide-x divide-border',
+};
+export function Stack({ direction = 'vertical', gap, align, justify, wrap = false, divider = false, children, className, ...rest }) {
+    return (_jsx("div", { className: cx('flex', direction === 'vertical' ? 'flex-col' : 'flex-row', resolve(gap, GAP), align && ALIGN[align], justify && JUSTIFY[justify], wrap && 'flex-wrap', divider && DIVIDER[direction], className), ...rest, children: children }));
+}
+//# sourceMappingURL=Stack.js.map

package/dist/layout/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../src/layout/Stack.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,OAAO,EAA+B,MAAM,mBAAmB,CAAC;AAoB9E,MAAM,KAAK,GAAqD;IAC9D,KAAK,EAAE,aAAa;IACpB,MAAM,EAAE,cAAc;IACtB,GAAG,EAAE,WAAW;IAChB,OAAO,EAAE,eAAe;IACxB,QAAQ,EAAE,gBAAgB;CAC3B,CAAC;AAEF,MAAM,OAAO,GAAuD;IAClE,KAAK,EAAE,eAAe;IACtB,MAAM,EAAE,gBAAgB;IACxB,GAAG,EAAE,aAAa;IAClB,OAAO,EAAE,iBAAiB;CAC3B,CAAC;AAEF,MAAM,OAAO,GAAyD;IACpE,QAAQ,EAAE,wBAAwB;IAClC,UAAU,EAAE,wBAAwB;CACrC,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,EACpB,SAAS,GAAG,UAAU,EACtB,GAAG,EACH,KAAK,EACL,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACI;IACX,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,MAAM,EACN,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAClD,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,EACjB,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,EACrB,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAC3B,IAAI,IAAI,WAAW,EACnB,OAAO,IAAI,OAAO,CAAC,SAAS,CAAC,EAC7B,SAAS,CACV,KACG,IAAI,YAEP,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/lib/cx.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Merge the kit's own classes with a caller-supplied `className`.
+ *
+ * 🔴 Why this exists: spreading `{...rest}` after setting `className` lets a caller's
+ * className *replace* the component's styling entirely, silently un-theming the element.
+ * Every component in this kit must compose through `cx` instead.
+ *
+ * The caller's classes come last so Tailwind's later-wins cascade lets them override,
+ * which is the intended escape hatch (design principle 2). What is not allowed is
+ * accepting colour/spacing/radius as *props* — see README "Design principles".
+ */
+export declare function cx(...parts: (string | false | null | undefined)[]): string;

package/dist/lib/cx.js

@@ -0,0 +1,15 @@
+/**
+ * Merge the kit's own classes with a caller-supplied `className`.
+ *
+ * 🔴 Why this exists: spreading `{...rest}` after setting `className` lets a caller's
+ * className *replace* the component's styling entirely, silently un-theming the element.
+ * Every component in this kit must compose through `cx` instead.
+ *
+ * The caller's classes come last so Tailwind's later-wins cascade lets them override,
+ * which is the intended escape hatch (design principle 2). What is not allowed is
+ * accepting colour/spacing/radius as *props* — see README "Design principles".
+ */
+export function cx(...parts) {
+    return parts.filter((p) => typeof p === 'string' && p.length > 0).join(' ');
+}
+//# sourceMappingURL=cx.js.map

package/dist/lib/cx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cx.js","sourceRoot":"","sources":["../../src/lib/cx.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,UAAU,EAAE,CAAC,GAAG,KAA4C;IAChE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAe,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC3F,CAAC"}

package/dist/lib/source-probe.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A class that exists only inside this package's build output.
+ *
+ * 🔴 Why a consumer needs it. Tailwind v4's automatic content detection does not walk
+ * `node_modules`, and every class this kit ships lives in `dist/**` — so an app that
+ * imports the theme but does not add the kit to its `@source` generates **none** of them.
+ * Measured by nene-vault on 2026-08-23 against `origin/main` `e566a83`: the build was
+ * green, the types were green, all 275 tests passed, and the CSS was 47.1 KB instead of
+ * 58.6 KB with every `gap-*`, `rounded-*`, focus and disabled class missing. The decisive
+ * detail is that `p-x-lg` — the same token, written in the app's own tsx — was generated.
+ * The difference is only whether the file lives under `node_modules`.
+ *
+ * Nothing in that failure is visible: jsdom does not compute styles, so a test suite cannot
+ * see it, and the symptom on screen is "the kit does not seem to do anything".
+ *
+ * So the kit ships a sentinel instead of relying on the README being read:
+ *
+ * ```js
+ * import { SOURCE_PROBE_CLASS } from '@hideyukimori/nene2-ui';
+ * const css = readFileSync('dist/assets/index.css', 'utf8');
+ * if (!css.includes(`.${SOURCE_PROBE_CLASS}`)) {
+ *   throw new Error('nene2-ui is not in Tailwind @source — its classes were not generated');
+ * }
+ * ```
+ *
+ * The utility resolves to `padding: 0px`, so it is inert if anyone ever applies it.
+ */
+export declare const SOURCE_PROBE_CLASS = "p-x-source-probe";

package/dist/lib/source-probe.js

@@ -0,0 +1,29 @@
+/**
+ * A class that exists only inside this package's build output.
+ *
+ * 🔴 Why a consumer needs it. Tailwind v4's automatic content detection does not walk
+ * `node_modules`, and every class this kit ships lives in `dist/**` — so an app that
+ * imports the theme but does not add the kit to its `@source` generates **none** of them.
+ * Measured by nene-vault on 2026-08-23 against `origin/main` `e566a83`: the build was
+ * green, the types were green, all 275 tests passed, and the CSS was 47.1 KB instead of
+ * 58.6 KB with every `gap-*`, `rounded-*`, focus and disabled class missing. The decisive
+ * detail is that `p-x-lg` — the same token, written in the app's own tsx — was generated.
+ * The difference is only whether the file lives under `node_modules`.
+ *
+ * Nothing in that failure is visible: jsdom does not compute styles, so a test suite cannot
+ * see it, and the symptom on screen is "the kit does not seem to do anything".
+ *
+ * So the kit ships a sentinel instead of relying on the README being read:
+ *
+ * ```js
+ * import { SOURCE_PROBE_CLASS } from '@hideyukimori/nene2-ui';
+ * const css = readFileSync('dist/assets/index.css', 'utf8');
+ * if (!css.includes(`.${SOURCE_PROBE_CLASS}`)) {
+ *   throw new Error('nene2-ui is not in Tailwind @source — its classes were not generated');
+ * }
+ * ```
+ *
+ * The utility resolves to `padding: 0px`, so it is inert if anyone ever applies it.
+ */
+export const SOURCE_PROBE_CLASS = 'p-x-source-probe';
+//# sourceMappingURL=source-probe.js.map

package/dist/lib/source-probe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"source-probe.js","sourceRoot":"","sources":["../../src/lib/source-probe.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,kBAAkB,CAAC"}

package/dist/lib/spacing.d.ts

@@ -0,0 +1,54 @@
+/**
+ * The kit's spacing scale — the single set of spacing values a caller may choose from.
+ *
+ * 🔴 Design principle 3: components take no spacing *values*, only names from this scale.
+ * `<Stack gap={4.5}>` does not exist, on purpose. Once a number can be written, it will be
+ * nudged, and the fleet is back to counting deviations.
+ *
+ * Why nine steps, and why these nine — measured, not guessed (2026-08-23, #298):
+ * across 944 spacing utilities written by hand in the fleet's screens, snapping every one
+ * onto this scale moves 98.2% of them by 2px or less, and 99.7% by 4px or less.
+ * The fleet currently writes those 944 uses with 153 distinct classes; this is nine.
+ *
+ * 🔴 Every class below is written out in full. Tailwind finds utilities by scanning source
+ * text, so a class assembled at runtime (`gap-x-${size}`) is never generated. Do not
+ * "simplify" these tables into template literals — the styles would silently disappear.
+ *
+ * 🔴 Do not name a step something numeric (`x-2`). `gap-x-2` is Tailwind's own column-gap
+ * utility and would win; `gap-x-2xs` is unambiguous because `2xs` is not a number
+ * (verified against tailwindcss 4.3.2).
+ */
+export type Space = 'none' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/** Breakpoint-keyed value. Mobile-first: `base` applies until the next key takes over. */
+export type Responsive<T> = T | {
+    base?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+};
+type ClassSet = {
+    base: string;
+    sm: string;
+    md: string;
+    lg: string;
+};
+/**
+ * Resolve a responsive prop against one of the tables below.
+ * Returns a class string; an undefined value contributes nothing.
+ */
+export declare function resolve<T extends string | number>(value: Responsive<T> | undefined, table: Record<string, ClassSet>): string;
+/** `gap` on a flex or grid container. */
+export declare const GAP: Record<Space, ClassSet>;
+/** Padding on all four sides. */
+export declare const PAD: Record<Space, ClassSet>;
+/** Inline (left/right) padding. */
+export declare const PAD_X: Record<Space, ClassSet>;
+/** Block (top/bottom) padding. */
+export declare const PAD_Y: Record<Space, ClassSet>;
+/**
+ * Grid column counts. 1–12 rather than only the six the fleet currently uses
+ * (1, 2, 3, 4, 5, 7), because a column count is a structural fact about a layout,
+ * not a design value — capping it would only push callers back to `grid-cols-*`.
+ */
+export declare const COLS: Record<number, ClassSet>;
+export {};