@eifi1/ui-kit 0.33.1 → 0.34.0

package/dist/wizard/wizard-step.d.ts

@@ -1,7 +1,5 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-
-interface WizardStepProps {
+import type { ReactNode } from "react";
+export interface WizardStepProps {
     children: ReactNode;
     className?: string;
     /**
@@ -31,6 +29,4 @@ interface WizardStepProps {
 /** The vertical rhythm one wizard step's content sits on. A component rather
  *  than a class string so every step in every app spaces its fields the same —
  *  and, with `title` / `description`, heads them the same. */
-declare function WizardStep({ children, className, title, description, headingLevel, actions, }: WizardStepProps): react.JSX.Element;
-
-export { WizardStep, type WizardStepProps };
+export declare function WizardStep({ children, className, title, description, headingLevel, actions, }: WizardStepProps): import("react").JSX.Element;

package/dist/wizard/wizard-step.js

@@ -15,8 +15,8 @@ function WizardStep({
   const hasActions = actions !== void 0 && actions !== null && actions !== false && actions !== "";
   const Heading = HEADING[headingLevel];
   const heading = /* @__PURE__ */ jsxs(Fragment, { children: [
-    hasTitle && /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-[var(--text-primary)]", children: title }),
-    hasDescription && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-muted)]", children: description })
+    hasTitle && /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-primary", children: title }),
+    hasDescription && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted", children: description })
   ] });
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
     hasActions ? (

package/dist/wizard/wizard-step.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/wizard/wizard-step.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport interface WizardStepProps {\n  children: ReactNode;\n  className?: string;\n  /**\n   * The step's heading (\"Choose a unit\"), drawn in the one style every step shares.\n   * kastlan's steps each hand-wrote `<h3 className=\"text-lg font-semibold\">` (about\n   * sixteen of them: lease-picker-step, lease-unit-step, …), and a hand-written\n   * heading is one that drifts — a size here, a colour there. Omitted: no heading.\n   */\n  title?: ReactNode;\n  /** The line under the title: what the step asks for, or why. Rendered only with a\n   *  `title` or on its own when there is none. */\n  description?: ReactNode;\n  /**\n   * Controls for the step as a whole, at the end of the header row beside the title —\n   * kastlan 43: the buildings step's \"Add building\" had nowhere to go but UNDER the\n   * list it adds to, where it falls below the fold once there are three buildings.\n   * A header action is where every other kit surface (`PageHeader`, `Card`) puts it.\n   *\n   * Wraps under the title on a narrow screen rather than squeezing it. Renders the\n   * header on its own if there is no `title` either.\n   */\n  actions?: ReactNode;\n  /** The heading's level. Default 3: the page has its `h1` and the wizard's own\n   *  chrome sits at `h2` (the review step, the cancel dialog), so a step is under it. */\n  headingLevel?: 2 | 3 | 4;\n}\n\nconst HEADING = { 2: \"h2\", 3: \"h3\", 4: \"h4\" } as const;\n\n/** The vertical rhythm one wizard step's content sits on. A component rather\n *  than a class string so every step in every app spaces its fields the same —\n *  and, with `title` / `description`, heads them the same. */\nexport function WizardStep({\n  children,\n  className,\n  title,\n  description,\n  headingLevel = 3,\n  actions,\n}: WizardStepProps) {\n  const hasTitle = title !== undefined && title !== null && title !== false && title !== \"\";\n  const hasDescription =\n    description !== undefined && description !== null && description !== false && description !== \"\";\n  const hasActions = actions !== undefined && actions !== null && actions !== false && actions !== \"\";\n  const Heading = HEADING[headingLevel];\n  const heading = (\n    <>\n      {hasTitle && <Heading className=\"text-lg font-semibold text-[var(--text-primary)]\">{title}</Heading>}\n      {hasDescription && <p className=\"text-sm text-[var(--text-muted)]\">{description}</p>}\n    </>\n  );\n  return (\n    <div className={cn(\"space-y-6\", className)}>\n      {hasActions ? (\n        // One row: the text takes the room, the actions keep their width at the end\n        // and wrap below it when there is not enough — `basis-64` is the width the\n        // title asks for before that happens (a zero basis would never wrap and\n        // squeeze the title to a word a line instead). `items-start` so a two-line\n        // description does not pull the button down to its middle; `ms-auto` keeps\n        // the actions at the end with no title, and when they wrap.\n        <div data-slot=\"wizard-step-header\" className=\"flex flex-wrap items-start justify-between gap-x-4 gap-y-2\">\n          {(hasTitle || hasDescription) && <div className=\"min-w-0 grow basis-64 space-y-1\">{heading}</div>}\n          <div data-slot=\"wizard-step-actions\" className=\"ms-auto flex shrink-0 flex-wrap items-center gap-2\">\n            {actions}\n          </div>\n        </div>\n      ) : (\n        // Without actions the header is exactly what it was, so a step that passes\n        // none renders as before.\n        (hasTitle || hasDescription) && (\n          <div data-slot=\"wizard-step-header\" className=\"space-y-1\">\n            {heading}\n          </div>\n        )\n      )}\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AAkDI,mBACe,KADf;AAjDJ,SAAS,UAAU;AA8BnB,MAAM,UAAU,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK;AAKrC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AACF,GAAoB;AAClB,QAAM,WAAW,UAAU,UAAa,UAAU,QAAQ,UAAU,SAAS,UAAU;AACvF,QAAM,iBACJ,gBAAgB,UAAa,gBAAgB,QAAQ,gBAAgB,SAAS,gBAAgB;AAChG,QAAM,aAAa,YAAY,UAAa,YAAY,QAAQ,YAAY,SAAS,YAAY;AACjG,QAAM,UAAU,QAAQ,YAAY;AACpC,QAAM,UACJ,iCACG;AAAA,gBAAY,oBAAC,WAAQ,WAAU,oDAAoD,iBAAM;AAAA,IACzF,kBAAkB,oBAAC,OAAE,WAAU,oCAAoC,uBAAY;AAAA,KAClF;AAEF,SACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOC,qBAAC,SAAI,aAAU,sBAAqB,WAAU,8DAC1C;AAAA,qBAAY,mBAAmB,oBAAC,SAAI,WAAU,mCAAmC,mBAAQ;AAAA,QAC3F,oBAAC,SAAI,aAAU,uBAAsB,WAAU,sDAC5C,mBACH;AAAA,SACF;AAAA;AAAA;AAAA;AAAA,OAIC,YAAY,mBACX,oBAAC,SAAI,aAAU,sBAAqB,WAAU,aAC3C,mBACH;AAAA;AAAA,IAGH;AAAA,KACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/wizard/wizard-step.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport interface WizardStepProps {\n  children: ReactNode;\n  className?: string;\n  /**\n   * The step's heading (\"Choose a unit\"), drawn in the one style every step shares.\n   * kastlan's steps each hand-wrote `<h3 className=\"text-lg font-semibold\">` (about\n   * sixteen of them: lease-picker-step, lease-unit-step, …), and a hand-written\n   * heading is one that drifts — a size here, a colour there. Omitted: no heading.\n   */\n  title?: ReactNode;\n  /** The line under the title: what the step asks for, or why. Rendered only with a\n   *  `title` or on its own when there is none. */\n  description?: ReactNode;\n  /**\n   * Controls for the step as a whole, at the end of the header row beside the title —\n   * kastlan 43: the buildings step's \"Add building\" had nowhere to go but UNDER the\n   * list it adds to, where it falls below the fold once there are three buildings.\n   * A header action is where every other kit surface (`PageHeader`, `Card`) puts it.\n   *\n   * Wraps under the title on a narrow screen rather than squeezing it. Renders the\n   * header on its own if there is no `title` either.\n   */\n  actions?: ReactNode;\n  /** The heading's level. Default 3: the page has its `h1` and the wizard's own\n   *  chrome sits at `h2` (the review step, the cancel dialog), so a step is under it. */\n  headingLevel?: 2 | 3 | 4;\n}\n\nconst HEADING = { 2: \"h2\", 3: \"h3\", 4: \"h4\" } as const;\n\n/** The vertical rhythm one wizard step's content sits on. A component rather\n *  than a class string so every step in every app spaces its fields the same —\n *  and, with `title` / `description`, heads them the same. */\nexport function WizardStep({\n  children,\n  className,\n  title,\n  description,\n  headingLevel = 3,\n  actions,\n}: WizardStepProps) {\n  const hasTitle = title !== undefined && title !== null && title !== false && title !== \"\";\n  const hasDescription =\n    description !== undefined && description !== null && description !== false && description !== \"\";\n  const hasActions = actions !== undefined && actions !== null && actions !== false && actions !== \"\";\n  const Heading = HEADING[headingLevel];\n  const heading = (\n    <>\n      {hasTitle && <Heading className=\"text-lg font-semibold text-primary\">{title}</Heading>}\n      {hasDescription && <p className=\"text-sm text-muted\">{description}</p>}\n    </>\n  );\n  return (\n    <div className={cn(\"space-y-6\", className)}>\n      {hasActions ? (\n        // One row: the text takes the room, the actions keep their width at the end\n        // and wrap below it when there is not enough — `basis-64` is the width the\n        // title asks for before that happens (a zero basis would never wrap and\n        // squeeze the title to a word a line instead). `items-start` so a two-line\n        // description does not pull the button down to its middle; `ms-auto` keeps\n        // the actions at the end with no title, and when they wrap.\n        <div data-slot=\"wizard-step-header\" className=\"flex flex-wrap items-start justify-between gap-x-4 gap-y-2\">\n          {(hasTitle || hasDescription) && <div className=\"min-w-0 grow basis-64 space-y-1\">{heading}</div>}\n          <div data-slot=\"wizard-step-actions\" className=\"ms-auto flex shrink-0 flex-wrap items-center gap-2\">\n            {actions}\n          </div>\n        </div>\n      ) : (\n        // Without actions the header is exactly what it was, so a step that passes\n        // none renders as before.\n        (hasTitle || hasDescription) && (\n          <div data-slot=\"wizard-step-header\" className=\"space-y-1\">\n            {heading}\n          </div>\n        )\n      )}\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AAkDI,mBACe,KADf;AAjDJ,SAAS,UAAU;AA8BnB,MAAM,UAAU,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK;AAKrC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AACF,GAAoB;AAClB,QAAM,WAAW,UAAU,UAAa,UAAU,QAAQ,UAAU,SAAS,UAAU;AACvF,QAAM,iBACJ,gBAAgB,UAAa,gBAAgB,QAAQ,gBAAgB,SAAS,gBAAgB;AAChG,QAAM,aAAa,YAAY,UAAa,YAAY,QAAQ,YAAY,SAAS,YAAY;AACjG,QAAM,UAAU,QAAQ,YAAY;AACpC,QAAM,UACJ,iCACG;AAAA,gBAAY,oBAAC,WAAQ,WAAU,sCAAsC,iBAAM;AAAA,IAC3E,kBAAkB,oBAAC,OAAE,WAAU,sBAAsB,uBAAY;AAAA,KACpE;AAEF,SACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOC,qBAAC,SAAI,aAAU,sBAAqB,WAAU,8DAC1C;AAAA,qBAAY,mBAAmB,oBAAC,SAAI,WAAU,mCAAmC,mBAAQ;AAAA,QAC3F,oBAAC,SAAI,aAAU,uBAAsB,WAAU,sDAC5C,mBACH;AAAA,SACF;AAAA;AAAA;AAAA;AAAA,OAIC,YAAY,mBACX,oBAAC,SAAI,aAAU,sBAAqB,WAAU,aAC3C,mBACH;AAAA;AAAA,IAGH;AAAA,KACH;AAEJ;","names":[]}

package/dist/wizard/wizard-summary.d.ts

@@ -1,6 +1,5 @@
-import * as react from 'react';
-import { SummarySection, WizardLabels } from './types.js';
-
+import type { SummarySection, WizardLabels } from "./types.js";
+import { type LabelOverride } from "../i18n/kit-labels.js";
 /**
  * The review step: one card per section, each row a label/value pair, each card
  * carrying an edit button back to the step it came from.
@@ -13,14 +12,12 @@ import { SummarySection, WizardLabels } from './types.js';
  * edit button. `disabled` greys every edit button at once — while the commit runs,
  * when jumping back would show a step whose edits can no longer reach the request.
  */
-declare function WizardSummary({ sections, onEditStep, disabled, labels, }: {
+export declare function WizardSummary({ sections, onEditStep, disabled, labels, }: {
     sections: SummarySection[];
     /** Called with the section's `stepIndex`. Optional only for a summary whose
      *  sections name no step at all. */
     onEditStep?: (stepIndex: number) => void;
     /** Disable every edit button (e.g. `wizard.isSubmitting`). */
     disabled?: boolean;
-    labels?: Partial<WizardLabels>;
-}): react.JSX.Element;
-
-export { WizardSummary };
+    labels?: LabelOverride<WizardLabels>;
+}): import("react").JSX.Element;

package/dist/wizard/wizard-summary.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Pencil } from "lucide-react";
-import { Card, CardAction, CardContent, CardHeader, CardTitle, IconButton } from "../components/ui.js";
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from "../components/card.js";
+import { IconButton } from "../components/icon-button.js";
 import { Tooltip } from "../components/tooltip.js";
 import { DEFAULT_WIZARD_LABELS } from "./types.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
@@ -13,7 +14,7 @@ function WizardSummary({
 }) {
   const l = useKitLabels("wizard", DEFAULT_WIZARD_LABELS, labels);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-[var(--text-primary)]", children: l.reviewTitle }),
+    /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-primary", children: l.reviewTitle }),
     sections.map((section, sIdx) => /* @__PURE__ */ jsxs(Card, { children: [
       /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", stackAction: false, children: [
         /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: section.label }),
@@ -30,10 +31,10 @@ function WizardSummary({
         ) }) })
       ] }),
       /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("dl", { className: "grid gap-2 text-sm", children: section.items.map((item, iIdx) => /* @__PURE__ */ jsxs("div", { children: [
-        iIdx > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 border-t border-[var(--border)]", role: "presentation" }),
+        iIdx > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 border-t border-subtle", role: "presentation" }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
-          /* @__PURE__ */ jsx("dt", { className: "text-[var(--text-muted)]", children: item.label }),
-          /* @__PURE__ */ jsx("dd", { className: "text-end font-medium text-[var(--text-primary)]", children: item.value })
+          /* @__PURE__ */ jsx("dt", { className: "text-muted", children: item.label }),
+          /* @__PURE__ */ jsx("dd", { className: "text-end font-medium text-primary", children: item.value })
         ] })
       ] }, iIdx)) }) })
     ] }, sIdx))

package/dist/wizard/wizard-summary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/wizard/wizard-summary.tsx"],"sourcesContent":["import { Pencil } from \"lucide-react\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle, IconButton } from \"../components/ui\";\nimport { Tooltip } from \"../components/tooltip\";\nimport type { SummarySection, WizardLabels } from \"./types\";\nimport { DEFAULT_WIZARD_LABELS } from \"./types\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * The review step: one card per section, each row a label/value pair, each card\n * carrying an edit button back to the step it came from.\n *\n * Sections are data, not children, because \"jump back to step N\" is the whole\n * point of the component and a caller assembling its own cards invariably drops\n * it. Labels and values are `ReactNode`, so a value can be a badge or a link.\n *\n * A section with no `stepIndex` (file-level counts, a total) is a card without an\n * edit button. `disabled` greys every edit button at once — while the commit runs,\n * when jumping back would show a step whose edits can no longer reach the request.\n */\nexport function WizardSummary({\n  sections,\n  onEditStep,\n  disabled = false,\n  labels,\n}: {\n  sections: SummarySection[];\n  /** Called with the section's `stepIndex`. Optional only for a summary whose\n   *  sections name no step at all. */\n  onEditStep?: (stepIndex: number) => void;\n  /** Disable every edit button (e.g. `wizard.isSubmitting`). */\n  disabled?: boolean;\n  labels?: Partial<WizardLabels>;\n}) {\n  const l = useKitLabels(\"wizard\", DEFAULT_WIZARD_LABELS, labels);\n\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-lg font-semibold text-[var(--text-primary)]\">{l.reviewTitle}</h2>\n      {sections.map((section, sIdx) => (\n        <Card key={sIdx}>\n          {/* CardHeader is a grid, and CardAction is the top-right column it\n              reserves — the edit button has to go through it or it stacks under\n              the title instead of sitting beside it. `stackAction={false}`: the pencil\n              is named by `aria-label` and stays an icon at Large, so it keeps its\n              place beside the title there too (0.32.1). */}\n          <CardHeader className=\"pb-2\" stackAction={false}>\n            <CardTitle className=\"text-base\">{section.label}</CardTitle>\n            {section.stepIndex !== undefined && onEditStep && (\n              <CardAction>\n                {/* The kit Tooltip, not a native `title`: it shows on keyboard focus too,\n                    and an app with a one-tooltip rule (keksdose dev#523) sees one. */}\n                <Tooltip label={l.edit}>\n                  <IconButton\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    aria-label={l.edit}\n                    disabled={disabled}\n                    onClick={() => onEditStep(section.stepIndex as number)}\n                  >\n                    <Pencil />\n                  </IconButton>\n                </Tooltip>\n              </CardAction>\n            )}\n          </CardHeader>\n          <CardContent>\n            <dl className=\"grid gap-2 text-sm\">\n              {section.items.map((item, iIdx) => (\n                <div key={iIdx}>\n                  {iIdx > 0 && (\n                    <div className=\"mb-2 border-t border-[var(--border)]\" role=\"presentation\" />\n                  )}\n                  <div className=\"flex items-start justify-between gap-4\">\n                    <dt className=\"text-[var(--text-muted)]\">{item.label}</dt>\n                    <dd className=\"text-end font-medium text-[var(--text-primary)]\">\n                      {item.value}\n                    </dd>\n                  </div>\n                </div>\n              ))}\n            </dl>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AAqCM,cAQI,YARJ;AArCN,SAAS,cAAc;AACvB,SAAS,MAAM,YAAY,aAAa,YAAY,WAAW,kBAAkB;AACjF,SAAS,eAAe;AAExB,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AActB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAQG;AACD,QAAM,IAAI,aAAa,UAAU,uBAAuB,MAAM;AAE9D,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,QAAG,WAAU,oDAAoD,YAAE,aAAY;AAAA,IAC/E,SAAS,IAAI,CAAC,SAAS,SACtB,qBAAC,QAMC;AAAA,2BAAC,cAAW,WAAU,QAAO,aAAa,OACxC;AAAA,4BAAC,aAAU,WAAU,aAAa,kBAAQ,OAAM;AAAA,QAC/C,QAAQ,cAAc,UAAa,cAClC,oBAAC,cAGC,8BAAC,WAAQ,OAAO,EAAE,MAChB;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,cAAY,EAAE;AAAA,YACd;AAAA,YACA,SAAS,MAAM,WAAW,QAAQ,SAAmB;AAAA,YAErD,8BAAC,UAAO;AAAA;AAAA,QACV,GACF,GACF;AAAA,SAEJ;AAAA,MACA,oBAAC,eACC,8BAAC,QAAG,WAAU,sBACX,kBAAQ,MAAM,IAAI,CAAC,MAAM,SACxB,qBAAC,SACE;AAAA,eAAO,KACN,oBAAC,SAAI,WAAU,wCAAuC,MAAK,gBAAe;AAAA,QAE5E,qBAAC,SAAI,WAAU,0CACb;AAAA,8BAAC,QAAG,WAAU,4BAA4B,eAAK,OAAM;AAAA,UACrD,oBAAC,QAAG,WAAU,mDACX,eAAK,OACR;AAAA,WACF;AAAA,WATQ,IAUV,CACD,GACH,GACF;AAAA,SA1CS,IA2CX,CACD;AAAA,KACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/wizard/wizard-summary.tsx"],"sourcesContent":["import { Pencil } from \"lucide-react\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle } from \"../components/card\";\nimport { IconButton } from \"../components/icon-button\";\nimport { Tooltip } from \"../components/tooltip\";\nimport type { SummarySection, WizardLabels } from \"./types\";\nimport { DEFAULT_WIZARD_LABELS } from \"./types\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\n\n/**\n * The review step: one card per section, each row a label/value pair, each card\n * carrying an edit button back to the step it came from.\n *\n * Sections are data, not children, because \"jump back to step N\" is the whole\n * point of the component and a caller assembling its own cards invariably drops\n * it. Labels and values are `ReactNode`, so a value can be a badge or a link.\n *\n * A section with no `stepIndex` (file-level counts, a total) is a card without an\n * edit button. `disabled` greys every edit button at once — while the commit runs,\n * when jumping back would show a step whose edits can no longer reach the request.\n */\nexport function WizardSummary({\n  sections,\n  onEditStep,\n  disabled = false,\n  labels,\n}: {\n  sections: SummarySection[];\n  /** Called with the section's `stepIndex`. Optional only for a summary whose\n   *  sections name no step at all. */\n  onEditStep?: (stepIndex: number) => void;\n  /** Disable every edit button (e.g. `wizard.isSubmitting`). */\n  disabled?: boolean;\n  labels?: LabelOverride<WizardLabels>;\n}) {\n  const l = useKitLabels(\"wizard\", DEFAULT_WIZARD_LABELS, labels);\n\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-lg font-semibold text-primary\">{l.reviewTitle}</h2>\n      {sections.map((section, sIdx) => (\n        <Card key={sIdx}>\n          {/* CardHeader is a grid, and CardAction is the top-right column it\n              reserves — the edit button has to go through it or it stacks under\n              the title instead of sitting beside it. `stackAction={false}`: the pencil\n              is named by `aria-label` and stays an icon at Large, so it keeps its\n              place beside the title there too (0.32.1). */}\n          <CardHeader className=\"pb-2\" stackAction={false}>\n            <CardTitle className=\"text-base\">{section.label}</CardTitle>\n            {section.stepIndex !== undefined && onEditStep && (\n              <CardAction>\n                {/* The kit Tooltip, not a native `title`: it shows on keyboard focus too,\n                    and an app with a one-tooltip rule (keksdose dev#523) sees one. */}\n                <Tooltip label={l.edit}>\n                  <IconButton\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    aria-label={l.edit}\n                    disabled={disabled}\n                    onClick={() => onEditStep(section.stepIndex as number)}\n                  >\n                    <Pencil />\n                  </IconButton>\n                </Tooltip>\n              </CardAction>\n            )}\n          </CardHeader>\n          <CardContent>\n            <dl className=\"grid gap-2 text-sm\">\n              {section.items.map((item, iIdx) => (\n                <div key={iIdx}>\n                  {iIdx > 0 && (\n                    <div className=\"mb-2 border-t border-subtle\" role=\"presentation\" />\n                  )}\n                  <div className=\"flex items-start justify-between gap-4\">\n                    <dt className=\"text-muted\">{item.label}</dt>\n                    <dd className=\"text-end font-medium text-primary\">\n                      {item.value}\n                    </dd>\n                  </div>\n                </div>\n              ))}\n            </dl>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AAsCM,cAQI,YARJ;AAtCN,SAAS,cAAc;AACvB,SAAS,MAAM,YAAY,aAAa,YAAY,iBAAiB;AACrE,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAExB,SAAS,6BAA6B;AACtC,SAAS,oBAAwC;AAc1C,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAQG;AACD,QAAM,IAAI,aAAa,UAAU,uBAAuB,MAAM;AAE9D,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,QAAG,WAAU,sCAAsC,YAAE,aAAY;AAAA,IACjE,SAAS,IAAI,CAAC,SAAS,SACtB,qBAAC,QAMC;AAAA,2BAAC,cAAW,WAAU,QAAO,aAAa,OACxC;AAAA,4BAAC,aAAU,WAAU,aAAa,kBAAQ,OAAM;AAAA,QAC/C,QAAQ,cAAc,UAAa,cAClC,oBAAC,cAGC,8BAAC,WAAQ,OAAO,EAAE,MAChB;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,cAAY,EAAE;AAAA,YACd;AAAA,YACA,SAAS,MAAM,WAAW,QAAQ,SAAmB;AAAA,YAErD,8BAAC,UAAO;AAAA;AAAA,QACV,GACF,GACF;AAAA,SAEJ;AAAA,MACA,oBAAC,eACC,8BAAC,QAAG,WAAU,sBACX,kBAAQ,MAAM,IAAI,CAAC,MAAM,SACxB,qBAAC,SACE;AAAA,eAAO,KACN,oBAAC,SAAI,WAAU,+BAA8B,MAAK,gBAAe;AAAA,QAEnE,qBAAC,SAAI,WAAU,0CACb;AAAA,8BAAC,QAAG,WAAU,cAAc,eAAK,OAAM;AAAA,UACvC,oBAAC,QAAG,WAAU,qCACX,eAAK,OACR;AAAA,WACF;AAAA,WATQ,IAUV,CACD,GACH,GACF;AAAA,SA1CS,IA2CX,CACD;AAAA,KACH;AAEJ;","names":[]}

package/dist/wizard.d.ts

@@ -1,107 +1,7 @@
-export { DEFAULT_WIZARD_LABELS, FieldErrors, StepStatus, SummaryItem, SummarySection, UseWizardOptions, UseWizardReturn, ValidateResult, WizardLabels, WizardStepConfig, WizardUrlSync, resolveWizardLabels } from './wizard/types.js';
-export { useWizard } from './wizard/use-wizard.js';
-export { WizardContextProvider, WizardContextValue, useOptionalWizardContext, useWizardContext, useWizardNextGate, useWizardStepValidate } from './wizard/wizard-context.js';
-export { RequiredFieldSpec, requiredFieldsValidator } from './wizard/validation.js';
-export { WizardStep, WizardStepProps } from './wizard/wizard-step.js';
-export { WizardSummary } from './wizard/wizard-summary.js';
-export { StepperNav } from './wizard/stepper-nav.js';
-import 'react';
-import './delete-account-setting-DAgGBrbn.js';
-import './components/tooltip.js';
-import './hooks/use-anchored-rect.js';
-import './lib/clipping.js';
-import './data-table-labels-BJ5JE_X2.js';
-import './components/data-table-sort.js';
-import './components/swipeable-row.js';
-import './components/status-dot.js';
-import './components/progress-bar.js';
-import './components/signed-amount.js';
-import './components/stat-tile.js';
-import './components/chip.js';
-import 'lucide-react';
-import './components/field-parts.js';
-import './components/write-lock.js';
-import './components/mini-calendar.js';
-import './components/calendar-heatmap.js';
-import './components/popover.js';
-import './hooks/use-breakpoint.js';
-import './components/field-sync.js';
-import './tour/tour.js';
-import './search/command-palette.js';
-import './search/global-search.js';
-import './search/search-index.js';
-import './components/month-picker.js';
-import './components/page-contents.js';
-import './components/series-chart-labels.js';
-import './components/pie-chart-labels.js';
-import './components/sparkline.js';
-import './components/signature-pad.js';
-import './components/password-strength.js';
-import './components/swatch-picker.js';
-import './components/tile-radio.js';
-import './components/icon-picker.js';
-import './components/dialog-frame.js';
-import './components/modal.js';
-import './hooks/use-search-param-state.js';
-import './components/measured-grid.js';
-import './components/user-avatar.js';
-import './lib/person-name.js';
-import './shell/topbar-action-menu.js';
-import './components/menu-item.js';
-import './components/floating-panel.js';
-import './hooks/use-authed-src.js';
-import './components/account-settings-labels.js';
-import './components/bulk-action-bar.js';
-import './components/list.js';
-import './components/breadcrumbs.js';
-import './components/toast.js';
-import './components/description-list.js';
-import './components/line-items.js';
-import './components/error-boundary.js';
-import './components/authed-image.js';
-import './components/image-grid.js';
-import './components/lightbox.js';
-import './auth/sign-in-form.js';
-import './landing/access.js';
-import './landing/landing-labels.js';
-import './shell/topbar-controls.js';
-import './theme/palette-presets.js';
-import './theme/chart-palette.js';
-import './theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import './auth/complete-name-dialog.js';
-import './auth/forgot-password-form.js';
-import './auth/status-parts.js';
-import './auth/reset-password-form.js';
-import './auth/verify-email.js';
-import './auth/not-found-page.js';
-import './auth/accept-invitation.js';
-import './shell/company-switcher.js';
-import './account/email-change-setting.js';
-import './account/sessions-setting.js';
-import './lib/format.js';
-import './account/data-export-setting.js';
-import './components/account-chips.js';
-import './admin/admin-parts.js';
-import './admin/admin-action-log.js';
-import './settings/settings-labels.js';
-import './demo/demo-labels.js';
-import './i18n/plurals.js';
-import './components/appearance-labels.js';
-import './theme/contrast.js';
-import './theme/text-size.js';
-import './components/reauth-dialog.js';
-import './components/server-wake.js';
-import './lib/server-wake.js';
-import './components/translation-review-labels.js';
-import './lib/translation-review.js';
-import './components/country-select.js';
-import './components/inline-edit-field.js';
-import './lib/iban.js';
-import './lib/phone.js';
-import './components/sign-chip.js';
-import './components/column-mapper.js';
-import './lib/column-mapping.js';
-import './lib/table-text.js';
-import './components/focus-ring.js';
+export * from "./wizard/types.js";
+export * from "./wizard/use-wizard.js";
+export * from "./wizard/wizard-context.js";
+export * from "./wizard/validation.js";
+export * from "./wizard/wizard-step.js";
+export * from "./wizard/wizard-summary.js";
+export * from "./wizard/stepper-nav.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.33.1",
+  "version": "0.34.0",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",
@@ -85,18 +85,19 @@
     "sync:commit-rules": "node scripts/sync-commit-rules.mjs",
     "check:static": "npm run typecheck && npm run lint && npm run check:tokens && npm run check:security && npm run check:commit-rules && npm run check:commits",
     "check:test": "npm run test:coverage",
-    "check:build": "npm run build && npm run check:graph && npm run check:package && npm run build:showcase && npm run check:tailwind",
+    "check:build": "npm run build && npm run check:graph && npm run check:package && node scripts/gen-export-inventory.mjs --check && node scripts/gen-styling-inventory.mjs --check && npm run build:showcase && npm run check:tailwind",
     "check": "node scripts/check.mjs",
     "test": "vitest run",
     "test:watch": "vitest",
-    "build": "node scripts/tsup-quiet.mjs && node scripts/fix-esm-extensions.mjs && node scripts/build-pay-page.mjs",
+    "build": "node scripts/tsup-quiet.mjs && node scripts/build-dts.mjs && node scripts/fix-esm-extensions.mjs && node scripts/flatten-en.mjs && node scripts/build-pay-page.mjs",
     "verify:package": "npm run build && node scripts/verify-package.mjs",
-    "dev": "tsup --watch",
+    "dev": "tsup --watch --onSuccess \"node scripts/build-dts.mjs && node scripts/fix-esm-extensions.mjs\"",
     "dev:showcase": "vite --config showcase/vite.config.ts",
     "build:showcase": "vite build --config showcase/vite.config.ts --logLevel warn",
     "preview:showcase": "vite preview --config showcase/vite.config.ts",
     "sync:server-kit": "node scripts/sync-server-kit.mjs",
     "prepublishOnly": "npm run build",
+    "check:sweep": "node scripts/screenshot-sizes-fixture.test.mjs && npm run build:showcase && node scripts/screenshot-sizes.mjs --pages all --no-screens --gate-truncation",
     "release": "commit-and-tag-version",
     "release:dry": "commit-and-tag-version --dry-run",
     "prepare": "husky || true",
@@ -105,8 +106,8 @@
   "peerDependencies": {
     "lucide-react": ">=0.400.0 <2",
     "modern-screenshot": "^4.7.0",
-    "react": ">=19",
-    "react-dom": ">=19",
+    "react": ">=19.2",
+    "react-dom": ">=19.2",
     "react-hook-form": "^7.55.0",
     "react-router": ">=7",
     "recharts": ">=3.8",
@@ -140,6 +141,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.1.1",
     "@vitest/coverage-v8": "^5.0.2",
+    "axe-core": "4.13.0",
     "commit-and-tag-version": "^13.2.1",
     "eslint": "^10.11.0",
     "eslint-import-resolver-typescript": "^4.4.5",
@@ -152,6 +154,7 @@
     "jsdom": "^30.0.1",
     "lucide-react": "^1.47.0",
     "modern-screenshot": "^4.7.0",
+    "playwright-core": "~1.63.0",
     "react-hook-form": "^7.88.0",
     "react-router": "^8.3.0",
     "recharts": "^3.8.1",

package/src/account/account-parts.ts

@@ -62,6 +62,6 @@ export function settle(call: () => unknown): Promise<unknown> {
   }
 }
 
-/** The settings cards' type scale, PasskeysSetting's: a small title and a muted line. */
-export const CARD_TITLE_CLASS = "text-sm font-medium";
-export const CARD_DESCRIPTION_CLASS = "text-xs text-[var(--text-muted)]";
+/** The settings cards' type scale, PasskeysSetting's: a small title and a muted line.
+ *  Defined with the card look in settings/ since 0.34 (MOD-8, refactor audit 2026-10). */
+export { CARD_DESCRIPTION_CLASS, CARD_TITLE_CLASS } from "../settings/settings-card-classes";

package/src/{components → account}/account-settings-labels.ts

@@ -43,6 +43,14 @@ export interface PasswordSettingLabels {
   submit: string;
   tooShort: string;
   mismatch: string;
+  /**
+   * 0.34 (KS U3): `password_incorrect` — server-kit's `400` for a wrong current
+   * password — under the current-password field, in the words `EmailChangeSetting`
+   * and `DeleteAccountSetting` say it with. OPTIONAL, like
+   * `TwoFactorSettingLabels.qrAlt` and for its reason — this interface is annotated at
+   * call sites — and filled from the provider's `accountSettings.password`, then English.
+   */
+  wrongPassword?: string;
 }
 
 export interface TwoFactorSettingLabels {
@@ -128,7 +136,7 @@ export interface PasskeysSettingLabels {
 
 export interface AccountSettingsLabels {
   profile: Required<ProfileSettingLabels>;
-  password: PasswordSettingLabels;
+  password: Required<PasswordSettingLabels>;
   // `Required` here, optional on the section interfaces: the namespace is what a full
   // catalogue (`@eifi1/ui-kit/i18n/<code>`, `missingKitLabels`) is written against, so
   // it must name the late keys; the section interfaces are annotated at call sites.
@@ -156,6 +164,8 @@ export const DEFAULT_ACCOUNT_SETTINGS_LABELS: AccountSettingsLabels = {
     submit: "Change password",
     tooShort: "The new password is too short.",
     mismatch: "The passwords don’t match.",
+    // The siblings' sentence (emailChange, deleteAccount), under the current password.
+    wrongPassword: "The password is incorrect.",
   },
   twoFactor: {
     status: "Two-factor authentication",