@eifi1/ui-kit 0.4.1 → 0.5.0

package/dist/chart.d.ts

@@ -0,0 +1,10 @@
+export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartSeriesConfig, ChartTooltip, ChartTooltipContent, useChart } from './components/chart.js';
+export { CHART_COLORS, HEATMAP_HEX, HeatStops, PALETTE_HEX, lerpHex, paletteFor, textOn } from './theme/chart-palette.js';
+export { Treemap, TreemapCell, TreemapCellProps, TreemapNode, TreemapProps, fitLabel } from './components/treemap.js';
+export { AXIS_TICK_WIDTH, AXIS_TITLE_STRIP, SeriesChart, SeriesChartAxis, SeriesChartProps, SeriesChartSeries, SeriesChartSpan, SeriesChartX, SeriesSource, StaticSeriesChart, axisBandWidth, mergeSeries, oneAxis, padBand, paddedDomain, seriesKey, soleSeriesColor } from './components/series-chart.js';
+export { DEFAULT_Y_AXIS, NO_ZOOM, SharedXZoom, ZOOM_MIN_DRAG, ZOOM_SQUARE_ENOUGH, ZoomAxes, ZoomBinding, ZoomDrag, ZoomFitSource, ZoomSelection, ZoomState, ZoomTarget, fitXToY, fitYToX, selectionFromDrag, withChartZoom, zoomAfter, zoomAxesFor, zoomDomains } from './components/chart-zoom.js';
+export { LegendColumn, LegendEntry, LegendGroup, STEP_DASH, STROKE_PATTERNS, ToggleLegend, ToggleLegendProps, strokeDash, toggleHidden } from './components/toggle-legend.js';
+export { FACING_SIDES, FacingSide, facingAxes, facingBand, facingHeadingPad } from './components/facing-pair.js';
+export { DEFAULT_SERIES_CHART_LABELS, SeriesChartLabels } from './components/series-chart-labels.js';
+import 'recharts';
+import 'react';

package/dist/chart.js

@@ -0,0 +1,10 @@
+"use client";
+export * from "./components/chart.js";
+export * from "./theme/chart-palette.js";
+export * from "./components/treemap.js";
+export * from "./components/series-chart.js";
+export * from "./components/chart-zoom.js";
+export * from "./components/toggle-legend.js";
+export * from "./components/facing-pair.js";
+export * from "./components/series-chart-labels.js";
+//# sourceMappingURL=chart.js.map

package/dist/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chart.ts"],"sourcesContent":["// `@eifi1/ui-kit/chart` — the chart shell and its colour system.\n//\n// A re-slicing of what the main barrel already exports, not a new API. It exists so a\n// consumer can reach the chart kit WITHOUT the barrel: `import(\"@eifi1/ui-kit/chart\")`\n// is a 31KB chunk, where the same lazy import through the barrel pulls 221KB, because\n// a dynamic import of the barrel cannot be tree-shaken down to one of its members.\n//\n// This is also the only entry point in the package that requires `recharts`.\nexport * from \"./components/chart\";\nexport * from \"./theme/chart-palette\";\n\n// The tile chart (treemap) the apps share — moved here from keksdose so every consumer\n// derives it from the package rather than from a copy.\nexport * from \"./components/treemap\";\n\n// lenkbank's zoomable series chart, its synced x-zoom, the toggle legend and the\n// mirrored-pair axis geometry — moved here so the apps derive them from the package.\nexport * from \"./components/series-chart\";\nexport * from \"./components/chart-zoom\";\nexport * from \"./components/toggle-legend\";\nexport * from \"./components/facing-pair\";\nexport * from \"./components/series-chart-labels\";\n"],"mappings":";AAQA,cAAc;AACd,cAAc;AAId,cAAc;AAId,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/components/account-settings.d.ts

@@ -53,6 +53,17 @@ interface TwoFactorSettingLabels {
     disableSection: string;
     password: string;
     disable: string;
+    /**
+     * Alt text for the setup QR image, which shipped as a hardcoded `alt="QR"`.
+     *
+     * OPTIONAL, alone among these keys, and not because it matters less: this
+     * interface is annotated at consumer call sites (`const LABELS:
+     * TwoFactorSettingLabels = {…}`), so a new REQUIRED key is a compile error in
+     * every app on the next `npm update` — the additive-API rule in the README. It
+     * falls back to English here the way `AmountInput`'s label keys do. Make it
+     * required in the next major, when the three apps can be updated with it.
+     */
+    qrAlt?: string;
 }
 declare function TwoFactorSetting({ enabled, setup, onStartSetup, onEnable, onDisable, busy, labels, }: {
     enabled: boolean;

package/dist/components/account-settings.js

@@ -1,7 +1,9 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button, Card, FIELD_WRITABLE_LOOK, Input } from "./ui.js";
 import { UserAvatar } from "./user-avatar.js";
+import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
 function ProfileSetting({
   name,
   email,
@@ -19,13 +21,13 @@ function ProfileSetting({
       /* @__PURE__ */ jsx(UserAvatar, { name, email, size: "lg" }),
       /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
         /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: labels.title }),
-        /* @__PURE__ */ jsx("div", { className: "truncate font-mono text-xs text-slate-500 dark:text-slate-400", children: email ?? "\u2014" })
+        /* @__PURE__ */ jsx("div", { className: "truncate font-mono text-xs text-[var(--text-muted)]", children: email ?? "\u2014" })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-sm", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-slate-500", children: labels.role }),
+      /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)]", children: labels.role }),
       /* @__PURE__ */ jsx("span", { children: role ?? "\u2014" }),
-      /* @__PURE__ */ jsx("span", { className: "text-slate-500", children: labels.memberSince }),
+      /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)]", children: labels.memberSince }),
       /* @__PURE__ */ jsx("span", { children: memberSince ?? "\u2014" })
     ] }),
     /* @__PURE__ */ jsx(
@@ -74,10 +76,11 @@ function PasswordSetting({
     /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "current-password", label: labels.current, value: current, onChange: (e) => setCurrent(e.target.value) }),
     /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "new-password", label: labels.next, value: next, onChange: (e) => setNext(e.target.value) }),
     /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "new-password", label: labels.confirm, value: confirm, onChange: (e) => setConfirm(e.target.value) }),
-    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-rose-600 dark:text-rose-400", children: error }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--danger)]", children: error }),
     /* @__PURE__ */ jsx(Button, { onClick: () => void submit(), disabled: !current || !next || !confirm || pending, children: labels.submit })
   ] });
 }
+const DEFAULT_QR_ALT = "QR code";
 function TwoFactorSetting({
   enabled,
   setup,
@@ -91,16 +94,20 @@ function TwoFactorSetting({
   const [password, setPassword] = useState("");
   const [otpReadonly, setOtpReadonly] = useState(true);
   const onOtpFocus = () => setOtpReadonly(false);
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   return /* @__PURE__ */ jsxs(Card, { className: "p-4 space-y-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
-      labels.status,
-      ": ",
-      enabled ? labels.enabledText : labels.disabledText
-    ] }),
+    /* @__PURE__ */ jsx("div", { className: "text-sm", children: common.fieldValue(labels.status, enabled ? labels.enabledText : labels.disabledText) }),
     !enabled && !setup && /* @__PURE__ */ jsx(Button, { onClick: onStartSetup, disabled: busy, children: labels.enable }),
     setup && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-600 dark:text-slate-400", children: labels.scanHint }),
-      /* @__PURE__ */ jsx("div", { className: "inline-block rounded-md bg-white p-2", children: /* @__PURE__ */ jsx("img", { alt: "QR", src: `data:image/svg+xml;base64,${setup.qrSvg}`, className: "h-48 w-48" }) }),
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-secondary)]", children: labels.scanHint }),
+      /* @__PURE__ */ jsx("div", { className: "inline-block rounded-md bg-white p-2", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          alt: labels.qrAlt ?? DEFAULT_QR_ALT,
+          src: `data:image/svg+xml;base64,${setup.qrSvg}`,
+          className: "h-48 w-48"
+        }
+      ) }),
       /* @__PURE__ */ jsx("div", { className: "break-all font-mono text-xs", children: setup.secret }),
       /* @__PURE__ */ jsx(
         Input,
@@ -124,7 +131,7 @@ function TwoFactorSetting({
       ),
       /* @__PURE__ */ jsx(Button, { onClick: () => onEnable(code), disabled: !code || busy, children: labels.verify })
     ] }),
-    enabled && /* @__PURE__ */ jsxs("div", { className: "space-y-3 border-t border-slate-200 pt-3 dark:border-slate-700", children: [
+    enabled && /* @__PURE__ */ jsxs("div", { className: "space-y-3 border-t border-[var(--border)] pt-3", children: [
       /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: labels.disableSection }),
       /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "current-password", label: labels.password, value: password, onChange: (e) => setPassword(e.target.value) }),
       /* @__PURE__ */ jsx(

package/dist/components/account-settings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/account-settings.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Button, Card, FIELD_WRITABLE_LOOK, Input } from \"./ui\";\nimport { UserAvatar } from \"./user-avatar\";\n\n/**\n * App-agnostic account-settings SECTIONS (feedback #333). The presentation lives\n * in @hb/ui; each app injects its own auth-API handlers + translated labels and\n * arranges these next to its own app-specific cards (appearance, budgets, …).\n * Every section is a self-contained <Card> owning its transient form state.\n */\n\nexport interface ProfileSettingLabels {\n  title: string;\n  email: string;\n  role: string;\n  memberSince: string;\n  displayName: string;\n  save: string;\n}\n\nexport function ProfileSetting({\n  name,\n  email,\n  role,\n  memberSince,\n  value,\n  onChange,\n  onSave,\n  saving,\n  labels,\n}: {\n  name?: string | null;\n  email?: string | null;\n  role?: ReactNode;\n  memberSince?: ReactNode;\n  value: string;\n  onChange: (value: string) => void;\n  onSave: () => void;\n  saving?: boolean;\n  labels: ProfileSettingLabels;\n}) {\n  const dirty = value.trim().length > 0 && value.trim() !== (name ?? \"\");\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"flex items-center gap-3\">\n        <UserAvatar name={name} email={email} size=\"lg\" />\n        <div className=\"min-w-0\">\n          <div className=\"text-sm font-medium\">{labels.title}</div>\n          <div className=\"truncate font-mono text-xs text-slate-500 dark:text-slate-400\">{email ?? \"—\"}</div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-sm\">\n        <span className=\"text-slate-500\">{labels.role}</span>\n        <span>{role ?? \"—\"}</span>\n        <span className=\"text-slate-500\">{labels.memberSince}</span>\n        <span>{memberSince ?? \"—\"}</span>\n      </div>\n      <Input\n        id=\"display-name\"\n        label={labels.displayName}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        maxLength={120}\n      />\n      <Button onClick={onSave} disabled={!dirty || saving}>\n        {labels.save}\n      </Button>\n    </Card>\n  );\n}\n\nexport interface PasswordSettingLabels {\n  title: string;\n  current: string;\n  next: string;\n  confirm: string;\n  submit: string;\n  tooShort: string;\n  mismatch: string;\n}\n\nexport function PasswordSetting({\n  onSubmit,\n  pending,\n  minLength = 8,\n  labels,\n}: {\n  /** Called with the validated (current, new) pair; return a promise to auto-clear on success. */\n  onSubmit: (currentPassword: string, newPassword: string) => void | Promise<unknown>;\n  pending?: boolean;\n  minLength?: number;\n  labels: PasswordSettingLabels;\n}) {\n  const [current, setCurrent] = useState(\"\");\n  const [next, setNext] = useState(\"\");\n  const [confirm, setConfirm] = useState(\"\");\n  const [error, setError] = useState<string | null>(null);\n\n  const submit = async () => {\n    if (next.length < minLength) {\n      setError(labels.tooShort);\n      return;\n    }\n    if (next !== confirm) {\n      setError(labels.mismatch);\n      return;\n    }\n    setError(null);\n    try {\n      await onSubmit(current, next);\n      setCurrent(\"\");\n      setNext(\"\");\n      setConfirm(\"\");\n    } catch {\n      // The app surfaces the failure (e.g. a toast); keep the fields for a retry.\n    }\n  };\n\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"text-sm font-medium\">{labels.title}</div>\n      <Input type=\"password\" autoComplete=\"current-password\" label={labels.current} value={current} onChange={(e) => setCurrent(e.target.value)} />\n      <Input type=\"password\" autoComplete=\"new-password\" label={labels.next} value={next} onChange={(e) => setNext(e.target.value)} />\n      <Input type=\"password\" autoComplete=\"new-password\" label={labels.confirm} value={confirm} onChange={(e) => setConfirm(e.target.value)} />\n      {error && <p className=\"text-xs text-rose-600 dark:text-rose-400\">{error}</p>}\n      <Button onClick={() => void submit()} disabled={!current || !next || !confirm || pending}>\n        {labels.submit}\n      </Button>\n    </Card>\n  );\n}\n\nexport interface TwoFactorSettingLabels {\n  status: string;\n  enabledText: string;\n  disabledText: string;\n  enable: string;\n  scanHint: string;\n  codeLabel: string;\n  verify: string;\n  disableSection: string;\n  password: string;\n  disable: string;\n}\n\nexport function TwoFactorSetting({\n  enabled,\n  setup,\n  onStartSetup,\n  onEnable,\n  onDisable,\n  busy,\n  labels,\n}: {\n  enabled: boolean;\n  /** QR + secret returned by the app's setup call; null before setup starts. */\n  setup: { qrSvg: string; secret: string } | null;\n  onStartSetup: () => void;\n  onEnable: (code: string) => void;\n  onDisable: (password: string, code: string) => void;\n  busy?: boolean;\n  labels: TwoFactorSettingLabels;\n}) {\n  const [code, setCode] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  // Browsers autofill one-time-code fields with the saved username; keep the\n  // field readOnly until focus to block that. It therefore has to keep the LOOK of\n  // an editable field (FIELD_WRITABLE_LOOK): this is the one place where readOnly\n  // does not mean \"you may not type here\", and without the opt-out the field would\n  // sit there greyed until the moment it is focused.\n  const [otpReadonly, setOtpReadonly] = useState(true);\n  const onOtpFocus = () => setOtpReadonly(false);\n\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"text-sm\">\n        {labels.status}: {enabled ? labels.enabledText : labels.disabledText}\n      </div>\n\n      {!enabled && !setup && (\n        <Button onClick={onStartSetup} disabled={busy}>\n          {labels.enable}\n        </Button>\n      )}\n\n      {setup && (\n        <div className=\"space-y-2\">\n          <div className=\"text-xs text-slate-600 dark:text-slate-400\">{labels.scanHint}</div>\n          <div className=\"inline-block rounded-md bg-white p-2\">\n            <img alt=\"QR\" src={`data:image/svg+xml;base64,${setup.qrSvg}`} className=\"h-48 w-48\" />\n          </div>\n          <div className=\"break-all font-mono text-xs\">{setup.secret}</div>\n          <Input\n            inputMode=\"numeric\"\n            autoComplete=\"one-time-code\"\n            readOnly={otpReadonly}\n            inputClassName={FIELD_WRITABLE_LOOK}\n            onFocus={onOtpFocus}\n            maxLength={8}\n            label={labels.codeLabel}\n            value={code}\n            onChange={(e) => setCode(e.target.value)}\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n              if (e.key === \"Enter\" && code && !busy) {\n                e.preventDefault();\n                onEnable(code);\n              }\n            }}\n          />\n          <Button onClick={() => onEnable(code)} disabled={!code || busy}>\n            {labels.verify}\n          </Button>\n        </div>\n      )}\n\n      {enabled && (\n        <div className=\"space-y-3 border-t border-slate-200 pt-3 dark:border-slate-700\">\n          <div className=\"text-sm font-medium\">{labels.disableSection}</div>\n          <Input type=\"password\" autoComplete=\"current-password\" label={labels.password} value={password} onChange={(e) => setPassword(e.target.value)} />\n          <Input\n            inputMode=\"numeric\"\n            autoComplete=\"one-time-code\"\n            readOnly={otpReadonly}\n            inputClassName={FIELD_WRITABLE_LOOK}\n            onFocus={onOtpFocus}\n            maxLength={8}\n            label={labels.codeLabel}\n            value={code}\n            onChange={(e) => setCode(e.target.value)}\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n              if (e.key === \"Enter\" && password && code && !busy) {\n                e.preventDefault();\n                onDisable(password, code);\n              }\n            }}\n          />\n          <Button variant=\"danger\" onClick={() => onDisable(password, code)} disabled={!password || !code || busy}>\n            {labels.disable}\n          </Button>\n        </div>\n      )}\n    </Card>\n  );\n}\n"],"mappings":"AA8CQ,cACA,YADA;AA9CR,SAAS,gBAAgB;AAEzB,SAAS,QAAQ,MAAM,qBAAqB,aAAa;AACzD,SAAS,kBAAkB;AAkBpB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAUG;AACD,QAAM,QAAQ,MAAM,KAAK,EAAE,SAAS,KAAK,MAAM,KAAK,OAAO,QAAQ;AACnE,SACE,qBAAC,QAAK,WAAU,iBACd;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,cAAW,MAAY,OAAc,MAAK,MAAK;AAAA,MAChD,qBAAC,SAAI,WAAU,WACb;AAAA,4BAAC,SAAI,WAAU,uBAAuB,iBAAO,OAAM;AAAA,QACnD,oBAAC,SAAI,WAAU,iEAAiE,mBAAS,UAAI;AAAA,SAC/F;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,4DACb;AAAA,0BAAC,UAAK,WAAU,kBAAkB,iBAAO,MAAK;AAAA,MAC9C,oBAAC,UAAM,kBAAQ,UAAI;AAAA,MACnB,oBAAC,UAAK,WAAU,kBAAkB,iBAAO,aAAY;AAAA,MACrD,oBAAC,UAAM,yBAAe,UAAI;AAAA,OAC5B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,OAAO,OAAO;AAAA,QACd;AAAA,QACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,WAAW;AAAA;AAAA,IACb;AAAA,IACA,oBAAC,UAAO,SAAS,QAAQ,UAAU,CAAC,SAAS,QAC1C,iBAAO,MACV;AAAA,KACF;AAEJ;AAYO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAMG;AACD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,EAAE;AACzC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,EAAE;AACzC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AAEtD,QAAM,SAAS,YAAY;AACzB,QAAI,KAAK,SAAS,WAAW;AAC3B,eAAS,OAAO,QAAQ;AACxB;AAAA,IACF;AACA,QAAI,SAAS,SAAS;AACpB,eAAS,OAAO,QAAQ;AACxB;AAAA,IACF;AACA,aAAS,IAAI;AACb,QAAI;AACF,YAAM,SAAS,SAAS,IAAI;AAC5B,iBAAW,EAAE;AACb,cAAQ,EAAE;AACV,iBAAW,EAAE;AAAA,IACf,QAAQ;AAAA,IAER;AAAA,EACF;AAEA,SACE,qBAAC,QAAK,WAAU,iBACd;AAAA,wBAAC,SAAI,WAAU,uBAAuB,iBAAO,OAAM;AAAA,IACnD,oBAAC,SAAM,MAAK,YAAW,cAAa,oBAAmB,OAAO,OAAO,SAAS,OAAO,SAAS,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK,GAAG;AAAA,IAC3I,oBAAC,SAAM,MAAK,YAAW,cAAa,gBAAe,OAAO,OAAO,MAAM,OAAO,MAAM,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK,GAAG;AAAA,IAC9H,oBAAC,SAAM,MAAK,YAAW,cAAa,gBAAe,OAAO,OAAO,SAAS,OAAO,SAAS,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK,GAAG;AAAA,IACtI,SAAS,oBAAC,OAAE,WAAU,4CAA4C,iBAAM;AAAA,IACzE,oBAAC,UAAO,SAAS,MAAM,KAAK,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,SAC9E,iBAAO,QACV;AAAA,KACF;AAEJ;AAeO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAM3C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AACnD,QAAM,aAAa,MAAM,eAAe,KAAK;AAE7C,SACE,qBAAC,QAAK,WAAU,iBACd;AAAA,yBAAC,SAAI,WAAU,WACZ;AAAA,aAAO;AAAA,MAAO;AAAA,MAAG,UAAU,OAAO,cAAc,OAAO;AAAA,OAC1D;AAAA,IAEC,CAAC,WAAW,CAAC,SACZ,oBAAC,UAAO,SAAS,cAAc,UAAU,MACtC,iBAAO,QACV;AAAA,IAGD,SACC,qBAAC,SAAI,WAAU,aACb;AAAA,0BAAC,SAAI,WAAU,8CAA8C,iBAAO,UAAS;AAAA,MAC7E,oBAAC,SAAI,WAAU,wCACb,8BAAC,SAAI,KAAI,MAAK,KAAK,6BAA6B,MAAM,KAAK,IAAI,WAAU,aAAY,GACvF;AAAA,MACA,oBAAC,SAAI,WAAU,+BAA+B,gBAAM,QAAO;AAAA,MAC3D;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,cAAa;AAAA,UACb,UAAU;AAAA,UACV,gBAAgB;AAAA,UAChB,SAAS;AAAA,UACT,WAAW;AAAA,UACX,OAAO,OAAO;AAAA,UACd,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA,UACvC,WAAW,CAAC,MAAuC;AACjD,gBAAI,EAAE,QAAQ,WAAW,QAAQ,CAAC,MAAM;AACtC,gBAAE,eAAe;AACjB,uBAAS,IAAI;AAAA,YACf;AAAA,UACF;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,UAAO,SAAS,MAAM,SAAS,IAAI,GAAG,UAAU,CAAC,QAAQ,MACvD,iBAAO,QACV;AAAA,OACF;AAAA,IAGD,WACC,qBAAC,SAAI,WAAU,kEACb;AAAA,0BAAC,SAAI,WAAU,uBAAuB,iBAAO,gBAAe;AAAA,MAC5D,oBAAC,SAAM,MAAK,YAAW,cAAa,oBAAmB,OAAO,OAAO,UAAU,OAAO,UAAU,UAAU,CAAC,MAAM,YAAY,EAAE,OAAO,KAAK,GAAG;AAAA,MAC9I;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,cAAa;AAAA,UACb,UAAU;AAAA,UACV,gBAAgB;AAAA,UAChB,SAAS;AAAA,UACT,WAAW;AAAA,UACX,OAAO,OAAO;AAAA,UACd,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA,UACvC,WAAW,CAAC,MAAuC;AACjD,gBAAI,EAAE,QAAQ,WAAW,YAAY,QAAQ,CAAC,MAAM;AAClD,gBAAE,eAAe;AACjB,wBAAU,UAAU,IAAI;AAAA,YAC1B;AAAA,UACF;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,UAAO,SAAQ,UAAS,SAAS,MAAM,UAAU,UAAU,IAAI,GAAG,UAAU,CAAC,YAAY,CAAC,QAAQ,MAChG,iBAAO,SACV;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/account-settings.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Button, Card, FIELD_WRITABLE_LOOK, Input } from \"./ui\";\nimport { UserAvatar } from \"./user-avatar\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * App-agnostic account-settings SECTIONS (feedback #333). The presentation lives\n * in @hb/ui; each app injects its own auth-API handlers + translated labels and\n * arranges these next to its own app-specific cards (appearance, budgets, …).\n * Every section is a self-contained <Card> owning its transient form state.\n */\n\nexport interface ProfileSettingLabels {\n  title: string;\n  email: string;\n  role: string;\n  memberSince: string;\n  displayName: string;\n  save: string;\n}\n\nexport function ProfileSetting({\n  name,\n  email,\n  role,\n  memberSince,\n  value,\n  onChange,\n  onSave,\n  saving,\n  labels,\n}: {\n  name?: string | null;\n  email?: string | null;\n  role?: ReactNode;\n  memberSince?: ReactNode;\n  value: string;\n  onChange: (value: string) => void;\n  onSave: () => void;\n  saving?: boolean;\n  labels: ProfileSettingLabels;\n}) {\n  const dirty = value.trim().length > 0 && value.trim() !== (name ?? \"\");\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"flex items-center gap-3\">\n        <UserAvatar name={name} email={email} size=\"lg\" />\n        <div className=\"min-w-0\">\n          <div className=\"text-sm font-medium\">{labels.title}</div>\n          <div className=\"truncate font-mono text-xs text-[var(--text-muted)]\">{email ?? \"—\"}</div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-sm\">\n        <span className=\"text-[var(--text-muted)]\">{labels.role}</span>\n        <span>{role ?? \"—\"}</span>\n        <span className=\"text-[var(--text-muted)]\">{labels.memberSince}</span>\n        <span>{memberSince ?? \"—\"}</span>\n      </div>\n      <Input\n        id=\"display-name\"\n        label={labels.displayName}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        maxLength={120}\n      />\n      <Button onClick={onSave} disabled={!dirty || saving}>\n        {labels.save}\n      </Button>\n    </Card>\n  );\n}\n\nexport interface PasswordSettingLabels {\n  title: string;\n  current: string;\n  next: string;\n  confirm: string;\n  submit: string;\n  tooShort: string;\n  mismatch: string;\n}\n\nexport function PasswordSetting({\n  onSubmit,\n  pending,\n  minLength = 8,\n  labels,\n}: {\n  /** Called with the validated (current, new) pair; return a promise to auto-clear on success. */\n  onSubmit: (currentPassword: string, newPassword: string) => void | Promise<unknown>;\n  pending?: boolean;\n  minLength?: number;\n  labels: PasswordSettingLabels;\n}) {\n  const [current, setCurrent] = useState(\"\");\n  const [next, setNext] = useState(\"\");\n  const [confirm, setConfirm] = useState(\"\");\n  const [error, setError] = useState<string | null>(null);\n\n  const submit = async () => {\n    if (next.length < minLength) {\n      setError(labels.tooShort);\n      return;\n    }\n    if (next !== confirm) {\n      setError(labels.mismatch);\n      return;\n    }\n    setError(null);\n    try {\n      await onSubmit(current, next);\n      setCurrent(\"\");\n      setNext(\"\");\n      setConfirm(\"\");\n    } catch {\n      // The app surfaces the failure (e.g. a toast); keep the fields for a retry.\n    }\n  };\n\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"text-sm font-medium\">{labels.title}</div>\n      <Input type=\"password\" autoComplete=\"current-password\" label={labels.current} value={current} onChange={(e) => setCurrent(e.target.value)} />\n      <Input type=\"password\" autoComplete=\"new-password\" label={labels.next} value={next} onChange={(e) => setNext(e.target.value)} />\n      <Input type=\"password\" autoComplete=\"new-password\" label={labels.confirm} value={confirm} onChange={(e) => setConfirm(e.target.value)} />\n      {error && <p className=\"text-xs text-[var(--danger)]\">{error}</p>}\n      <Button onClick={() => void submit()} disabled={!current || !next || !confirm || pending}>\n        {labels.submit}\n      </Button>\n    </Card>\n  );\n}\n\nexport interface TwoFactorSettingLabels {\n  status: string;\n  enabledText: string;\n  disabledText: string;\n  enable: string;\n  scanHint: string;\n  codeLabel: string;\n  verify: string;\n  disableSection: string;\n  password: string;\n  disable: string;\n  /**\n   * Alt text for the setup QR image, which shipped as a hardcoded `alt=\"QR\"`.\n   *\n   * OPTIONAL, alone among these keys, and not because it matters less: this\n   * interface is annotated at consumer call sites (`const LABELS:\n   * TwoFactorSettingLabels = {…}`), so a new REQUIRED key is a compile error in\n   * every app on the next `npm update` — the additive-API rule in the README. It\n   * falls back to English here the way `AmountInput`'s label keys do. Make it\n   * required in the next major, when the three apps can be updated with it.\n   */\n  qrAlt?: string;\n}\n\n/** `qrAlt`'s English fallback, kept beside the interface rather than inline so the\n *  one English word in this section is findable by the same `DEFAULT_*` grep as\n *  every other one. Module-private: the key goes required in the next major. */\nconst DEFAULT_QR_ALT = \"QR code\";\n\nexport function TwoFactorSetting({\n  enabled,\n  setup,\n  onStartSetup,\n  onEnable,\n  onDisable,\n  busy,\n  labels,\n}: {\n  enabled: boolean;\n  /** QR + secret returned by the app's setup call; null before setup starts. */\n  setup: { qrSvg: string; secret: string } | null;\n  onStartSetup: () => void;\n  onEnable: (code: string) => void;\n  onDisable: (password: string, code: string) => void;\n  busy?: boolean;\n  labels: TwoFactorSettingLabels;\n}) {\n  const [code, setCode] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  // Browsers autofill one-time-code fields with the saved username; keep the\n  // field readOnly until focus to block that. It therefore has to keep the LOOK of\n  // an editable field (FIELD_WRITABLE_LOOK): this is the one place where readOnly\n  // does not mean \"you may not type here\", and without the opt-out the field would\n  // sit there greyed until the moment it is focused.\n  const [otpReadonly, setOtpReadonly] = useState(true);\n  const onOtpFocus = () => setOtpReadonly(false);\n  // Only for the \"Status: Enabled\" composition — the punctuation between a field's\n  // name and its value is the language's (see `CommonLabels.fieldValue`).\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"text-sm\">\n        {common.fieldValue(labels.status, enabled ? labels.enabledText : labels.disabledText)}\n      </div>\n\n      {!enabled && !setup && (\n        <Button onClick={onStartSetup} disabled={busy}>\n          {labels.enable}\n        </Button>\n      )}\n\n      {setup && (\n        <div className=\"space-y-2\">\n          <div className=\"text-xs text-[var(--text-secondary)]\">{labels.scanHint}</div>\n          {/* `bg-white`, NOT `--bg-surface`, and it must stay that way: a QR code is\n              read by a camera looking for maximum contrast between the modules and\n              their quiet zone. On the dark theme a surface-coloured backing makes it\n              slow to acquire, and on a warm light preset it lowers the contrast ratio\n              the spec is written against. This is the one place in the kit where a\n              literal colour is the correct answer. */}\n          <div className=\"inline-block rounded-md bg-white p-2\">\n            <img\n              alt={labels.qrAlt ?? DEFAULT_QR_ALT}\n              src={`data:image/svg+xml;base64,${setup.qrSvg}`}\n              className=\"h-48 w-48\"\n            />\n          </div>\n          <div className=\"break-all font-mono text-xs\">{setup.secret}</div>\n          <Input\n            inputMode=\"numeric\"\n            autoComplete=\"one-time-code\"\n            readOnly={otpReadonly}\n            inputClassName={FIELD_WRITABLE_LOOK}\n            onFocus={onOtpFocus}\n            maxLength={8}\n            label={labels.codeLabel}\n            value={code}\n            onChange={(e) => setCode(e.target.value)}\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n              if (e.key === \"Enter\" && code && !busy) {\n                e.preventDefault();\n                onEnable(code);\n              }\n            }}\n          />\n          <Button onClick={() => onEnable(code)} disabled={!code || busy}>\n            {labels.verify}\n          </Button>\n        </div>\n      )}\n\n      {enabled && (\n        <div className=\"space-y-3 border-t border-[var(--border)] pt-3\">\n          <div className=\"text-sm font-medium\">{labels.disableSection}</div>\n          <Input type=\"password\" autoComplete=\"current-password\" label={labels.password} value={password} onChange={(e) => setPassword(e.target.value)} />\n          <Input\n            inputMode=\"numeric\"\n            autoComplete=\"one-time-code\"\n            readOnly={otpReadonly}\n            inputClassName={FIELD_WRITABLE_LOOK}\n            onFocus={onOtpFocus}\n            maxLength={8}\n            label={labels.codeLabel}\n            value={code}\n            onChange={(e) => setCode(e.target.value)}\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n              if (e.key === \"Enter\" && password && code && !busy) {\n                e.preventDefault();\n                onDisable(password, code);\n              }\n            }}\n          />\n          <Button variant=\"danger\" onClick={() => onDisable(password, code)} disabled={!password || !code || busy}>\n            {labels.disable}\n          </Button>\n        </div>\n      )}\n    </Card>\n  );\n}\n"],"mappings":";AA+CQ,cACA,YADA;AA/CR,SAAS,gBAAgB;AAEzB,SAAS,QAAQ,MAAM,qBAAqB,aAAa;AACzD,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB,oBAAoB;AAkB7C,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAUG;AACD,QAAM,QAAQ,MAAM,KAAK,EAAE,SAAS,KAAK,MAAM,KAAK,OAAO,QAAQ;AACnE,SACE,qBAAC,QAAK,WAAU,iBACd;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,cAAW,MAAY,OAAc,MAAK,MAAK;AAAA,MAChD,qBAAC,SAAI,WAAU,WACb;AAAA,4BAAC,SAAI,WAAU,uBAAuB,iBAAO,OAAM;AAAA,QACnD,oBAAC,SAAI,WAAU,uDAAuD,mBAAS,UAAI;AAAA,SACrF;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,4DACb;AAAA,0BAAC,UAAK,WAAU,4BAA4B,iBAAO,MAAK;AAAA,MACxD,oBAAC,UAAM,kBAAQ,UAAI;AAAA,MACnB,oBAAC,UAAK,WAAU,4BAA4B,iBAAO,aAAY;AAAA,MAC/D,oBAAC,UAAM,yBAAe,UAAI;AAAA,OAC5B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,OAAO,OAAO;AAAA,QACd;AAAA,QACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,WAAW;AAAA;AAAA,IACb;AAAA,IACA,oBAAC,UAAO,SAAS,QAAQ,UAAU,CAAC,SAAS,QAC1C,iBAAO,MACV;AAAA,KACF;AAEJ;AAYO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAMG;AACD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,EAAE;AACzC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,EAAE;AACzC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AAEtD,QAAM,SAAS,YAAY;AACzB,QAAI,KAAK,SAAS,WAAW;AAC3B,eAAS,OAAO,QAAQ;AACxB;AAAA,IACF;AACA,QAAI,SAAS,SAAS;AACpB,eAAS,OAAO,QAAQ;AACxB;AAAA,IACF;AACA,aAAS,IAAI;AACb,QAAI;AACF,YAAM,SAAS,SAAS,IAAI;AAC5B,iBAAW,EAAE;AACb,cAAQ,EAAE;AACV,iBAAW,EAAE;AAAA,IACf,QAAQ;AAAA,IAER;AAAA,EACF;AAEA,SACE,qBAAC,QAAK,WAAU,iBACd;AAAA,wBAAC,SAAI,WAAU,uBAAuB,iBAAO,OAAM;AAAA,IACnD,oBAAC,SAAM,MAAK,YAAW,cAAa,oBAAmB,OAAO,OAAO,SAAS,OAAO,SAAS,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK,GAAG;AAAA,IAC3I,oBAAC,SAAM,MAAK,YAAW,cAAa,gBAAe,OAAO,OAAO,MAAM,OAAO,MAAM,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK,GAAG;AAAA,IAC9H,oBAAC,SAAM,MAAK,YAAW,cAAa,gBAAe,OAAO,OAAO,SAAS,OAAO,SAAS,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK,GAAG;AAAA,IACtI,SAAS,oBAAC,OAAE,WAAU,gCAAgC,iBAAM;AAAA,IAC7D,oBAAC,UAAO,SAAS,MAAM,KAAK,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,SAC9E,iBAAO,QACV;AAAA,KACF;AAEJ;AA6BA,MAAM,iBAAiB;AAEhB,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAM3C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AACnD,QAAM,aAAa,MAAM,eAAe,KAAK;AAG7C,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAE3D,SACE,qBAAC,QAAK,WAAU,iBACd;AAAA,wBAAC,SAAI,WAAU,WACZ,iBAAO,WAAW,OAAO,QAAQ,UAAU,OAAO,cAAc,OAAO,YAAY,GACtF;AAAA,IAEC,CAAC,WAAW,CAAC,SACZ,oBAAC,UAAO,SAAS,cAAc,UAAU,MACtC,iBAAO,QACV;AAAA,IAGD,SACC,qBAAC,SAAI,WAAU,aACb;AAAA,0BAAC,SAAI,WAAU,wCAAwC,iBAAO,UAAS;AAAA,MAOvE,oBAAC,SAAI,WAAU,wCACb;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,OAAO,SAAS;AAAA,UACrB,KAAK,6BAA6B,MAAM,KAAK;AAAA,UAC7C,WAAU;AAAA;AAAA,MACZ,GACF;AAAA,MACA,oBAAC,SAAI,WAAU,+BAA+B,gBAAM,QAAO;AAAA,MAC3D;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,cAAa;AAAA,UACb,UAAU;AAAA,UACV,gBAAgB;AAAA,UAChB,SAAS;AAAA,UACT,WAAW;AAAA,UACX,OAAO,OAAO;AAAA,UACd,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA,UACvC,WAAW,CAAC,MAAuC;AACjD,gBAAI,EAAE,QAAQ,WAAW,QAAQ,CAAC,MAAM;AACtC,gBAAE,eAAe;AACjB,uBAAS,IAAI;AAAA,YACf;AAAA,UACF;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,UAAO,SAAS,MAAM,SAAS,IAAI,GAAG,UAAU,CAAC,QAAQ,MACvD,iBAAO,QACV;AAAA,OACF;AAAA,IAGD,WACC,qBAAC,SAAI,WAAU,kDACb;AAAA,0BAAC,SAAI,WAAU,uBAAuB,iBAAO,gBAAe;AAAA,MAC5D,oBAAC,SAAM,MAAK,YAAW,cAAa,oBAAmB,OAAO,OAAO,UAAU,OAAO,UAAU,UAAU,CAAC,MAAM,YAAY,EAAE,OAAO,KAAK,GAAG;AAAA,MAC9I;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,cAAa;AAAA,UACb,UAAU;AAAA,UACV,gBAAgB;AAAA,UAChB,SAAS;AAAA,UACT,WAAW;AAAA,UACX,OAAO,OAAO;AAAA,UACd,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA,UACvC,WAAW,CAAC,MAAuC;AACjD,gBAAI,EAAE,QAAQ,WAAW,YAAY,QAAQ,CAAC,MAAM;AAClD,gBAAE,eAAe;AACjB,wBAAU,UAAU,IAAI;AAAA,YAC1B;AAAA,UACF;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,UAAO,SAAQ,UAAS,SAAS,MAAM,UAAU,UAAU,IAAI,GAAG,UAAU,CAAC,YAAY,CAAC,QAAQ,MAChG,iBAAO,SACV;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/alert-banner.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 type AlertTone = "danger" | "warning" | "neutral";
 /** The tone's border + surface on their own — for a caller that already has a box
@@ -10,11 +10,15 @@ declare function toneFrameClass(tone: AlertTone): string;
  * and surface plus this component's own radius and padding, the latter
  * compensating the 2px colored border so toggling tones never shifts layout. */
 declare function alertFrameClass(tone: AlertTone): string;
-/** Static warning/danger callout box with the shared frame and an icon. */
-declare function AlertBanner({ tone, className, children, }: {
+interface AlertBannerProps extends ComponentPropsWithoutRef<"div"> {
+    /** `neutral` is deliberately not offered: a callout with a warning triangle in it
+     *  and no colour is a warning that looks like a note, which is the one thing this
+     *  box must never be. The neutral frame is still available on its own through
+     *  {@link toneFrameClass}. */
     tone?: Exclude<AlertTone, "neutral">;
-    className?: string;
     children: ReactNode;
-}): react.JSX.Element;
+}
+/** Static warning/danger callout box with the shared frame and an icon. */
+declare function AlertBanner({ tone, className, children, ...rest }: AlertBannerProps): react.JSX.Element;
 
-export { AlertBanner, type AlertTone, alertFrameClass, toneFrameClass };
+export { AlertBanner, type AlertBannerProps, type AlertTone, alertFrameClass, toneFrameClass };

package/dist/components/alert-banner.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertTriangle } from "lucide-react";
 import { cn } from "../lib/cn.js";
 const TONE_FRAME = {
-  danger: "border-2 border-rose-400 bg-rose-50 dark:border-rose-600 dark:bg-rose-900/20",
-  warning: "border-2 border-amber-300 bg-amber-50 dark:border-amber-700/60 dark:bg-amber-900/20",
-  neutral: "border border-slate-200 dark:border-slate-700"
+  danger: "border-2 border-[var(--danger-border)] bg-[var(--danger-bg)]",
+  warning: "border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]",
+  neutral: "border border-[var(--border)]"
 };
 function toneFrameClass(tone) {
   return TONE_FRAME[tone];
@@ -14,22 +15,25 @@ function alertFrameClass(tone) {
   return `${box} ${TONE_FRAME[tone]}`;
 }
 const TONE_TEXT = {
-  danger: "text-rose-900 dark:text-rose-100",
-  warning: "text-amber-900 dark:text-amber-200"
+  danger: "text-[var(--danger)]",
+  warning: "text-[var(--warning)]"
 };
 const TONE_ICON = {
-  danger: "text-rose-600 dark:text-rose-400",
-  warning: "text-amber-600 dark:text-amber-400"
+  danger: "text-[var(--danger)]",
+  warning: "text-[var(--warning)]"
 };
-function AlertBanner({
-  tone = "danger",
-  className,
-  children
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-2 text-sm", alertFrameClass(tone), TONE_TEXT[tone], className), children: [
-    /* @__PURE__ */ jsx(AlertTriangle, { className: cn("mt-0.5 size-4 shrink-0", TONE_ICON[tone]) }),
-    /* @__PURE__ */ jsx("span", { className: "flex-1", children })
-  ] });
+function AlertBanner({ tone = "danger", className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cn("flex items-start gap-2 text-sm", alertFrameClass(tone), TONE_TEXT[tone], className),
+      children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: cn("mt-0.5 size-4 shrink-0", TONE_ICON[tone]) }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children })
+      ]
+    }
+  );
 }
 export {
   AlertBanner,

package/dist/components/alert-banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { AlertTriangle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AlertTone = \"danger\" | \"warning\" | \"neutral\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-rose-400 bg-rose-50 dark:border-rose-600 dark:bg-rose-900/20\",\n  warning: \"border-2 border-amber-300 bg-amber-50 dark:border-amber-700/60 dark:bg-amber-900/20\",\n  neutral: \"border border-slate-200 dark:border-slate-700\",\n};\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout. */\nexport function alertFrameClass(tone: AlertTone): string {\n  const box = tone === \"neutral\" ? \"rounded-md p-3\" : \"rounded-md p-[11px]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\nconst TONE_TEXT: Record<Exclude<AlertTone, \"neutral\">, string> = {\n  danger: \"text-rose-900 dark:text-rose-100\",\n  warning: \"text-amber-900 dark:text-amber-200\",\n};\n\nconst TONE_ICON: Record<Exclude<AlertTone, \"neutral\">, string> = {\n  danger: \"text-rose-600 dark:text-rose-400\",\n  warning: \"text-amber-600 dark:text-amber-400\",\n};\n\n/** Static warning/danger callout box with the shared frame and an icon. */\nexport function AlertBanner({\n  tone = \"danger\",\n  className,\n  children,\n}: {\n  tone?: Exclude<AlertTone, \"neutral\">;\n  className?: string;\n  children: ReactNode;\n}) {\n  return (\n    <div className={cn(\"flex items-start gap-2 text-sm\", alertFrameClass(tone), TONE_TEXT[tone], className)}>\n      <AlertTriangle className={cn(\"mt-0.5 size-4 shrink-0\", TONE_ICON[tone])} />\n      <span className=\"flex-1\">{children}</span>\n    </div>\n  );\n}\n"],"mappings":"AA6DI,SACE,KADF;AA5DJ,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AAiBnB,MAAM,aAAwC;AAAA,EAC5C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AACX;AAKO,SAAS,eAAe,MAAyB;AACtD,SAAO,WAAW,IAAI;AACxB;AAKO,SAAS,gBAAgB,MAAyB;AACvD,QAAM,MAAM,SAAS,YAAY,mBAAmB;AACpD,SAAO,GAAG,GAAG,IAAI,WAAW,IAAI,CAAC;AACnC;AAEA,MAAM,YAA2D;AAAA,EAC/D,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,MAAM,YAA2D;AAAA,EAC/D,QAAQ;AAAA,EACR,SAAS;AACX;AAGO,SAAS,YAAY;AAAA,EAC1B,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAIG;AACD,SACE,qBAAC,SAAI,WAAW,GAAG,kCAAkC,gBAAgB,IAAI,GAAG,UAAU,IAAI,GAAG,SAAS,GACpG;AAAA,wBAAC,iBAAc,WAAW,GAAG,0BAA0B,UAAU,IAAI,CAAC,GAAG;AAAA,IACzE,oBAAC,UAAK,WAAU,UAAU,UAAS;AAAA,KACrC;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { AlertTriangle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AlertTone = \"danger\" | \"warning\" | \"neutral\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-[var(--danger-border)] bg-[var(--danger-bg)]\",\n  warning: \"border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]\",\n  neutral: \"border border-[var(--border)]\",\n};\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout. */\nexport function alertFrameClass(tone: AlertTone): string {\n  const box = tone === \"neutral\" ? \"rounded-md p-3\" : \"rounded-md p-[11px]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\nconst TONE_TEXT: Record<Exclude<AlertTone, \"neutral\">, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n};\n\nconst TONE_ICON: Record<Exclude<AlertTone, \"neutral\">, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n};\n\nexport interface AlertBannerProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** `neutral` is deliberately not offered: a callout with a warning triangle in it\n   *  and no colour is a warning that looks like a note, which is the one thing this\n   *  box must never be. The neutral frame is still available on its own through\n   *  {@link toneFrameClass}. */\n  tone?: Exclude<AlertTone, \"neutral\">;\n  children: ReactNode;\n}\n\n/** Static warning/danger callout box with the shared frame and an icon. */\nexport function AlertBanner({ tone = \"danger\", className, children, ...rest }: AlertBannerProps) {\n  return (\n    <div\n      // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n      // `aria-describedby` — then the layout and tone classes, which are merged\n      // through `cn` rather than spread so a caller's `className` refines the box\n      // instead of replacing it.\n      {...rest}\n      className={cn(\"flex items-start gap-2 text-sm\", alertFrameClass(tone), TONE_TEXT[tone], className)}\n    >\n      <AlertTriangle className={cn(\"mt-0.5 size-4 shrink-0\", TONE_ICON[tone])} />\n      <span className=\"flex-1\">{children}</span>\n    </div>\n  );\n}\n"],"mappings":";AA8DI,SAQE,KARF;AA7DJ,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AAiBnB,MAAM,aAAwC;AAAA,EAC5C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AACX;AAKO,SAAS,eAAe,MAAyB;AACtD,SAAO,WAAW,IAAI;AACxB;AAKO,SAAS,gBAAgB,MAAyB;AACvD,QAAM,MAAM,SAAS,YAAY,mBAAmB;AACpD,SAAO,GAAG,GAAG,IAAI,WAAW,IAAI,CAAC;AACnC;AAEA,MAAM,YAA2D;AAAA,EAC/D,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,MAAM,YAA2D;AAAA,EAC/D,QAAQ;AAAA,EACR,SAAS;AACX;AAYO,SAAS,YAAY,EAAE,OAAO,UAAU,WAAW,UAAU,GAAG,KAAK,GAAqB;AAC/F,SACE;AAAA,IAAC;AAAA;AAAA,MAKE,GAAG;AAAA,MACJ,WAAW,GAAG,kCAAkC,gBAAgB,IAAI,GAAG,UAAU,IAAI,GAAG,SAAS;AAAA,MAEjG;AAAA,4BAAC,iBAAc,WAAW,GAAG,0BAA0B,UAAU,IAAI,CAAC,GAAG;AAAA,QACzE,oBAAC,UAAK,WAAU,UAAU,UAAS;AAAA;AAAA;AAAA,EACrC;AAEJ;","names":[]}

package/dist/components/amount-input.d.ts

@@ -2,6 +2,24 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { CalculatorButtonLabels } from './calculator.js';
 import { NumberPadSheetLabels } from './numpad-sheet.js';
+import '../i18n/kit-labels.js';
+import './data-table-labels.js';
+import './mini-calendar.js';
+import './popover.js';
+import './chip.js';
+import 'lucide-react';
+import './field-sync.js';
+import './ui.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
 
 interface AmountInputProps {
     value: string;
@@ -17,10 +35,11 @@ interface AmountInputProps {
     id?: string;
     ariaLabel?: string;
     /** Every user-facing string this component and the two it composes own, so a
-     *  translating host can supply its own. The package carries no translation
-     *  catalog (see the README) — English defaults, each key optional, so the other
-     *  consumer apps are unaffected. `currency` names the picker chip and is
-     *  suffixed with the selected code; the rest are pass-through. */
+     *  translating host can supply its own. Each key optional, and each a per-field
+     *  override of the kit-wide translation in `<UiKitProvider labels>`: `currency`
+     *  and `currencySearch` of its `currency` namespace, the rest of `calculator`.
+     *  `currency` names the picker chip, composed with the selected code through
+     *  `common.fieldValue`; the rest are pass-through. */
     labels?: {
         currency?: string;
         currencySearch?: string;
@@ -30,6 +49,13 @@ interface AmountInputProps {
         pad?: NumberPadSheetLabels;
         calculator?: CalculatorButtonLabels;
     };
+    /** Translated currency names for the chip's picker, keyed by ISO code. The same
+     *  sparse override `CurrencySelect` takes, and for the same reason: the names in
+     *  `CURRENCIES` are shipped data, so without this they are the one English word
+     *  left in a translated row. Not part of `labels` because it is keyed by DATA
+     *  rather than by a fixed set of slots, and an app passes the same map to both
+     *  pickers. */
+    currencyNames?: Record<string, string>;
     /** Focus the field on mount — on mobile this also opens the numpad sheet, so a
      *  new-transaction form can jump straight to amount entry (feedback #70). */
     autoFocus?: boolean;

package/dist/components/amount-input.js

@@ -1,13 +1,20 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
 import { ChevronDown } from "lucide-react";
-import { CURRENCIES, CurrencyFlag, getCurrency } from "./currency-select.js";
+import { CURRENCIES, CurrencyFlag, currencyName, getCurrency } from "./currency-select.js";
 import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, PHONE_QUERY } from "./ui.js";
 import { cn } from "../lib/cn.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
 import { CalculatorButton } from "./calculator.js";
 import { NumberPadSheet } from "./numpad-sheet.js";
 import { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from "./dropdown.js";
+import {
+  DEFAULT_COMMON_LABELS,
+  DEFAULT_CURRENCY_LABELS,
+  useKitLabels,
+  useKitLocale
+} from "../i18n/kit-labels.js";
 import {
   commitExpression,
   evaluateExpression,
@@ -31,7 +38,7 @@ function isResultOf(previous, text) {
   return n !== null && formatResult(n) === text.trim();
 }
 const AmountInput = forwardRef(
-  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid, className, id, ariaLabel, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels }, ref) => {
+  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid, className, id, ariaLabel, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames }, ref) => {
     const generatedId = useId();
     const fieldId = id ?? generatedId;
     const editable = !!onCurrencyChange;
@@ -68,14 +75,25 @@ const AmountInput = forwardRef(
     const commit = () => handleText(commitExpression(shown));
     const { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef } = useDropdownSearch();
     const chipRef = useRef(null);
+    const currencyOverrides = useMemo(() => {
+      const out = {};
+      if (labels?.currency !== void 0) out.currency = labels.currency;
+      if (labels?.currencySearch !== void 0) out.search = labels.currencySearch;
+      return out;
+    }, [labels?.currency, labels?.currencySearch]);
+    const currencyText = useKitLabels("currency", DEFAULT_CURRENCY_LABELS, currencyOverrides);
+    const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+    const locale = useKitLocale();
     const selected = getCurrency(currency);
     const filtered = useMemo(() => {
-      const q = query.trim().toLowerCase();
+      const q = query.trim().toLocaleLowerCase(locale);
       if (!q) return CURRENCIES;
       return CURRENCIES.filter(
-        (c) => c.code.toLowerCase().includes(q) || c.name.toLowerCase().includes(q) || c.symbol.toLowerCase().includes(q)
+        (c) => c.code.toLowerCase().includes(q) || // The name the row SHOWS, so a translated list is searchable in the
+        // language it is written in.
+        currencyName(c, currencyNames, locale).toLocaleLowerCase(locale).includes(q) || c.symbol.toLowerCase().includes(q)
       );
-    }, [query]);
+    }, [query, currencyNames, locale]);
     return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: cn("w-full", className), children: [
       /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
         /* @__PURE__ */ jsx(
@@ -155,7 +173,7 @@ const AmountInput = forwardRef(
                 {
                   "aria-hidden": true,
                   className: cn(
-                    "pointer-events-none px-1 font-medium text-slate-500 dark:text-slate-400",
+                    "pointer-events-none px-1 font-medium text-[var(--text-muted)]",
                     // A text-xs chip next to a 36px figure reads as a stray footnote.
                     asDisplay ? "text-sm" : "text-xs"
                   ),
@@ -168,9 +186,13 @@ const AmountInput = forwardRef(
                   ref: chipRef,
                   type: "button",
                   onClick: () => setOpen((v) => !v),
-                  "aria-label": selected ? `${labels?.currency ?? "Currency"}: ${selected.code}` : labels?.currency ?? "Currency",
+                  "aria-label": (
+                    // "Currency: EUR" through `common.fieldValue`, not a template literal:
+                    // the colon-and-space is punctuation a translation has to own.
+                    selected ? common.fieldValue(currencyText.currency, selected.code) : currencyText.currency
+                  ),
                   className: cn(
-                    "flex items-center gap-1 rounded px-2 py-1 font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800",
+                    "flex items-center gap-1 rounded px-2 py-1 font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
                     asDisplay ? "text-sm" : "text-xs"
                   ),
                   children: [
@@ -194,7 +216,7 @@ const AmountInput = forwardRef(
                 query,
                 onQueryChange: setQuery,
                 inputRef,
-                placeholder: labels?.currencySearch ?? "Search currency"
+                placeholder: currencyText.search
               }
             ),
             children: filtered.map((c) => {
@@ -208,14 +230,14 @@ const AmountInput = forwardRef(
                     setOpen(false);
                   },
                   className: cn(
-                    "flex w-full items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-slate-50 dark:hover:bg-slate-800",
-                    active && "bg-slate-100 dark:bg-slate-800"
+                    "flex w-full items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-[var(--bg-hover)]",
+                    active && "bg-[var(--bg-active)]"
                   ),
                   children: [
                     /* @__PURE__ */ jsx(CurrencyFlag, { country: c.country }),
-                    /* @__PURE__ */ jsx("span", { className: "font-mono text-slate-500 dark:text-slate-400 w-8 shrink-0 text-xs", children: c.symbol }),
-                    /* @__PURE__ */ jsx("span", { className: "font-medium text-slate-900 dark:text-slate-100", children: c.code }),
-                    /* @__PURE__ */ jsx("span", { className: "text-slate-500 dark:text-slate-400 truncate text-xs", children: c.name })
+                    /* @__PURE__ */ jsx("span", { className: "font-mono text-[var(--text-muted)] w-8 shrink-0 text-xs", children: c.symbol }),
+                    /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--text-primary)]", children: c.code }),
+                    /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)] truncate text-xs", children: currencyName(c, currencyNames, locale) })
                   ]
                 }
               ) }, c.code);