@eifi1/ui-kit 0.4.0

package/dist/components/amount-input.js

@@ -0,0 +1,243 @@
+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 { 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 {
+  commitExpression,
+  evaluateExpression,
+  formatResult,
+  isBareAmount,
+  looksLikeExpression,
+  sanitizeLive,
+  splitLeadingSign
+} from "../lib/calc.js";
+const TONE_CLASS = {
+  neutral: "",
+  outflow: "text-money-neg",
+  inflow: "text-money-pos"
+};
+const DISPLAY_INPUT_CLASS = cn(
+  FIELD_DISPLAY,
+  "text-4xl font-semibold leading-tight tracking-tight tabular-nums"
+);
+function isResultOf(previous, text) {
+  const n = evaluateExpression(previous);
+  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) => {
+    const generatedId = useId();
+    const fieldId = id ?? generatedId;
+    const editable = !!onCurrencyChange;
+    const isMobile = useMediaQuery(PHONE_QUERY, false);
+    const showCalc = !disabled && !isMobile;
+    const [focused, setFocused] = useState(false);
+    const showNumpad = isMobile && !disabled && focused;
+    const asDisplay = variant === "display" && isMobile;
+    const innerRef = useRef(null);
+    const setRefs = useCallback(
+      (el) => {
+        innerRef.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      [ref]
+    );
+    const signOwned = onNegativeChange !== void 0;
+    const shown = signOwned && negative && isBareAmount(value) ? `-${value}` : value;
+    const handleText = (raw, previous = shown) => {
+      const text = sanitizeLive(raw);
+      if (!signOwned) {
+        onChange(text);
+        return;
+      }
+      const { sign, rest } = splitLeadingSign(text);
+      if (sign) {
+        onNegativeChange(sign === "-");
+      } else if (looksLikeExpression(previous) && isBareAmount(text) && isResultOf(previous, text)) {
+        onNegativeChange(false);
+      }
+      onChange(sign ? rest : text);
+    };
+    const commit = () => handleText(commitExpression(shown));
+    const { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef } = useDropdownSearch();
+    const chipRef = useRef(null);
+    const selected = getCurrency(currency);
+    const filtered = useMemo(() => {
+      const q = query.trim().toLowerCase();
+      if (!q) return CURRENCIES;
+      return CURRENCIES.filter(
+        (c) => c.code.toLowerCase().includes(q) || c.name.toLowerCase().includes(q) || c.symbol.toLowerCase().includes(q)
+      );
+    }, [query]);
+    return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: cn("w-full", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: setRefs,
+            id: fieldId,
+            "aria-label": ariaLabel,
+            type: "text",
+            autoFocus,
+            inputMode: isMobile ? "none" : "decimal",
+            autoComplete: "off",
+            disabled,
+            placeholder: asDisplay ? placeholder ?? "0" : label !== void 0 ? " " : placeholder,
+            value: shown,
+            onChange: (e) => handleText(e.target.value),
+            onFocus: () => setFocused(true),
+            onBlur: () => {
+              commit();
+              setFocused(false);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") commit();
+            },
+            className: cn(
+              // With a label, use the floating-input padding (pt-4 pb-1) like every
+              // other labelled field so the value sits BELOW the floated label rather
+              // than vertically centred where it overlaps the resting label
+              // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +
+              // transparent-placeholder bits.
+              asDisplay ? DISPLAY_INPUT_CLASS : label !== void 0 ? FLOATING_INPUT_CLASS : FIELD_BASE,
+              // Room for the trailing controls. showCalc is always false on a phone,
+              // so the display shape only ever has to clear the currency chip — and
+              // it clears it by the chip's actual width (a text-sm code plus a
+              // chevron, ~58px) rather than the 5rem the boxed shape reserves. On a
+              // 375px screen those 16px are the difference between a readable figure
+              // and a clipped one (feedback #430 rework).
+              asDisplay ? currency ? editable ? "pr-16" : "pr-12" : "pr-0" : showCalc ? currency ? editable ? "pr-24" : "pr-16" : "pr-10" : currency ? editable ? "pr-20" : "pr-14" : "pr-3",
+              // Centred display shape: centre in what is LEFT of the currency chip.
+              // `text-center` alone would centre the figure in the whole box, i.e.
+              // partly underneath the chip; the padding above is what takes the chip
+              // out of the centring, and nothing is added on the left because a
+              // mirrored reservation would spend the width twice (see `align`).
+              asDisplay && align === "center" && "text-center",
+              // Last, so it wins over the base class's own text colour.
+              TONE_CLASS[tone],
+              invalid && FIELD_INVALID
+            ),
+            "aria-invalid": invalid || void 0
+          }
+        ),
+        label !== void 0 && // The display shape drops the label VISUALLY, not from the accessibility
+        // tree: a 36px tinted figure at the top of a transaction form is legibly
+        // the amount, but a screen reader still needs the name, and callers that
+        // pass `label` without `ariaLabel` would otherwise be left with none.
+        /* @__PURE__ */ jsx("label", { htmlFor: fieldId, className: asDisplay ? "sr-only" : FLOATING_LABEL_CLASS, children: label }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "absolute flex items-center gap-0.5",
+              asDisplay ? "bottom-1 right-0" : "inset-y-1 right-1"
+            ),
+            children: [
+              showCalc && /* @__PURE__ */ jsx(
+                CalculatorButton,
+                {
+                  value: shown,
+                  onChange: handleText,
+                  className: "px-1.5",
+                  ariaLabel: labels?.calculatorTrigger,
+                  labels: labels?.calculator
+                }
+              ),
+              currency && !editable && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "pointer-events-none px-1 font-medium text-slate-500 dark:text-slate-400",
+                    // A text-xs chip next to a 36px figure reads as a stray footnote.
+                    asDisplay ? "text-sm" : "text-xs"
+                  ),
+                  children: currency
+                }
+              ),
+              currency && editable && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  ref: chipRef,
+                  type: "button",
+                  onClick: () => setOpen((v) => !v),
+                  "aria-label": selected ? `${labels?.currency ?? "Currency"}: ${selected.code}` : labels?.currency ?? "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",
+                    asDisplay ? "text-sm" : "text-xs"
+                  ),
+                  children: [
+                    currency,
+                    /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        editable && open && /* @__PURE__ */ jsx(
+          DropdownPanel,
+          {
+            anchorRef: chipRef,
+            panelRef,
+            empty: filtered.length === 0,
+            header: /* @__PURE__ */ jsx(
+              DropdownSearchHeader,
+              {
+                query,
+                onQueryChange: setQuery,
+                inputRef,
+                placeholder: labels?.currencySearch ?? "Search currency"
+              }
+            ),
+            children: filtered.map((c) => {
+              const active = c.code === selected?.code;
+              return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    onCurrencyChange?.(c.code);
+                    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"
+                  ),
+                  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 })
+                  ]
+                }
+              ) }, c.code);
+            })
+          }
+        )
+      ] }),
+      showNumpad && /* @__PURE__ */ jsx(
+        NumberPadSheet,
+        {
+          value: shown,
+          onChange: handleText,
+          onDone: () => innerRef.current?.blur(),
+          label,
+          labels: labels?.pad
+        }
+      )
+    ] });
+  }
+);
+AmountInput.displayName = "AmountInput";
+export {
+  AmountInput
+};
+//# sourceMappingURL=amount-input.js.map

package/dist/components/amount-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/amount-input.tsx"],"sourcesContent":["import { forwardRef, useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { CURRENCIES, CurrencyFlag, getCurrency } from \"./currency-select\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, PHONE_QUERY } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\nimport {\n  commitExpression,\n  evaluateExpression,\n  formatResult,\n  isBareAmount,\n  looksLikeExpression,\n  sanitizeLive,\n  splitLeadingSign,\n} from \"../lib/calc\";\n\ninterface AmountInputProps {\n  value: string;\n  onChange: (value: string) => void;\n  currency?: string;\n  onCurrencyChange?: (code: string) => void;\n  placeholder?: string;\n  label?: ReactNode;\n  disabled?: boolean;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  /** Every user-facing string this component and the two it composes own, so a\n   *  translating host can supply its own. The package carries no translation\n   *  catalog (see the README) — English defaults, each key optional, so the other\n   *  consumer apps are unaffected. `currency` names the picker chip and is\n   *  suffixed with the selected code; the rest are pass-through. */\n  labels?: {\n    currency?: string;\n    currencySearch?: string;\n    /** Names the calculator TRIGGER this component renders. `calculator` below\n     *  names the controls inside the popover it opens. */\n    calculatorTrigger?: string;\n    pad?: NumberPadSheetLabels;\n    calculator?: CalculatorButtonLabels;\n  };\n  /** Focus the field on mount — on mobile this also opens the numpad sheet, so a\n   *  new-transaction form can jump straight to amount entry (feedback #70). */\n  autoFocus?: boolean;\n  /**\n   * Tint the typed figure by what it will DO (Keksdose feedback #167).\n   *\n   * The direction is chosen with a toggle beside the field rather than typed, so\n   * the digits alone say nothing about which way the money goes — on the one screen\n   * where getting that backwards is the expensive mistake. Colour says it\n   * continuously, and it costs no layout. It stays the MAIN indication (live #201\n   * rework: *\"The main indication shall still be the color\"*); {@link negative}\n   * renders the sign as a second, quieter signal in front of the figure.\n   *\n   * Never the ONLY signal: the toggle it mirrors is right there, labelled, so this\n   * is reinforcement rather than the sole carrier of the meaning.\n   */\n  tone?: \"neutral\" | \"outflow\" | \"inflow\";\n  /**\n   * The SIGN of the figure, owned by the caller's direction control (Keksdose live\n   * #201 rework: *\"Outflow should be negative and inflow positive … the sign shall\n   * be displayed but not necessarily be typed in\"*).\n   *\n   * `value` stays the MAGNITUDE. The minus is glued on at render time and stripped\n   * off again before anything is reported back, so the caller never sees its own\n   * prefix echoed and no code path can end up applying it twice. That is the whole\n   * cure: there is exactly ONE place the sign lives, and it is not the text.\n   *\n   * Because it is rendered rather than stored it cannot be deleted (the next render\n   * puts it back), a select-all-and-retype keeps the direction, and the caret needs\n   * no minding.\n   */\n  negative?: boolean;\n  /**\n   * A sign the user TYPED, or a calculation that resolved to a signed number.\n   *\n   * SET, never flip. A \"-\" means *\"this is an outflow\"*, so typing it twice says the\n   * same thing twice — which is exactly what the rework asks for (*\"Subtracting\n   * values twice resulting in inflow -> outflow and back to inflow seems not\n   * reasonable\"*). \"+\" says the other direction.\n   *\n   * Its presence is what ARMS the whole sign behaviour. A field with no direction\n   * control — an account's starting balance, a loan payment, a holding's cost —\n   * passes neither prop and keeps a text that is the whole truth, minus included.\n   */\n  onNegativeChange?: (negative: boolean) => void;\n  /**\n   * How the field presents itself ON A PHONE (Keksdose feedback #176).\n   *\n   * `\"field\"` (default) is the labelled, bordered input used everywhere else.\n   *\n   * `\"display\"` keeps every mechanic — the same `<input>`, the same numpad sheet,\n   * the same currency picker, the same commit/blur contract — and only drops the\n   * chrome: no border, no fill, no floating label, the figure set at display size.\n   * On a form whose whole point is one number, a bordered `text-sm` box draws the\n   * amount at the same weight as the memo beside it; this makes it the headline\n   * instead. It stays fully editable — the underline and the caret are what say so.\n   *\n   * Phone-only by construction: it keys off the same breakpoint as the numpad, so\n   * from `md` up the field is byte-for-byte the normal one and a desktop grid keeps\n   * its column rhythm.\n   */\n  variant?: \"field\" | \"display\";\n  /**\n   * Where the figure sits in its row, for `variant=\"display\"` only (Keksdose\n   * feedback #176 rework).\n   *\n   * `\"start\"` (default) keeps it flush left, in the reading column the fields\n   * below it share — and it is what the entry forms use, because a figure that\n   * starts at a known edge is legible at any width: when the value outgrows the\n   * field, the digits that scroll out of sight are the trailing ones, not the\n   * magnitude (Keksdose feedback #430 rework).\n   *\n   * `\"center\"` makes it a centred headline. It centres in the width that REMAINS\n   * after the trailing currency control, not in the whole box: the control is\n   * pinned to the right edge, so a plain `text-center` would centre the figure\n   * under it and the last digits would sit behind the chip. This used to mirror\n   * the control's reservation onto the left instead, which centred correctly but\n   * spent twice the control's width on padding — fatal on a 375px screen, where\n   * it left a 36px figure 16px to live in.\n   */\n  align?: \"start\" | \"center\";\n}\n\n// The consuming app's ONE money palette (`--money-expense` / `--money-income`),\n// not a bespoke rose/emerald pairing: a figure being typed has to wear the same\n// colour the same figure will wear once it is a row in the table behind the form\n// (Keksdose dev#434). The utilities are unlayered and theme-aware, so no `dark:`\n// variant is needed and they win over the field's own text colour regardless of\n// where `cn` puts them.\nconst TONE_CLASS: Record<\"neutral\" | \"outflow\" | \"inflow\", string> = {\n  neutral: \"\",\n  outflow: \"text-money-neg\",\n  inflow: \"text-money-pos\",\n};\n\n// The shared chrome-less treatment at money size. `tabular-nums` so digits don't\n// reflow the figure as they are typed; FIELD_DISPLAY's own muted placeholder\n// colour is what keeps an EMPTY form from painting its zero in the direction tint\n// (`tone` is computed from 0, which reads as an inflow).\nconst DISPLAY_INPUT_CLASS = cn(\n  FIELD_DISPLAY,\n  \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\",\n);\n\n/**\n * Is `text` the ANSWER to `previous`, or something typed OVER it?\n *\n * \"The old text was a sum and the new one is bare\" cannot tell those apart, and both\n * gestures are ordinary: select-all-and-retype after a typo, or backspacing \"-20+\"\n * back down to a fresh figure. Read as an answer, they move the direction chip — so\n * an outflow of 7 quietly booked +7.00 (live #201 rework).\n *\n * The question that does separate them is arithmetic, not shape: evaluate what the\n * text replaced and see whether this IS that number. \"-12+30\" → \"18\" still is, so a\n * sum that comes out positive still takes the chip with it; \"-20+50\" → \"7\" is not,\n * and \"-20+\" evaluates to nothing at all.\n */\nfunction isResultOf(previous: string, text: string): boolean {\n  const n = evaluateExpression(previous);\n  return n !== null && formatResult(n) === text.trim();\n}\n\nexport const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(\n  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid, className, id, ariaLabel, autoFocus, tone = \"neutral\", negative = false, onNegativeChange, variant = \"field\", align = \"start\", labels }, ref) => {\n    const generatedId = useId();\n    const fieldId = id ?? generatedId;\n    const editable = !!onCurrencyChange;\n    // On phones we suppress the OS keyboard (inputMode=\"none\" below) and show our\n    // own calculator numpad, so the desktop popover trigger is hidden. The\n    // right-padding keys off showCalc, so it tightens up automatically.\n    const isMobile = useMediaQuery(PHONE_QUERY, false);\n    const showCalc = !disabled && !isMobile;\n    const [focused, setFocused] = useState(false);\n    // On mobile, focusing the field opens the numpad bottom sheet in place of the\n    // native keyboard (feedback #334) — a full calculator keypad, not just the old\n    // operator bar. An internal ref lets the sheet's \"Done\" blur the input, which\n    // commits + closes via the existing onBlur handler.\n    const showNumpad = isMobile && !disabled && focused;\n    // Gate the display treatment on the SAME `isMobile` the numpad uses rather than\n    // on `max-md:` classes, so the two can never drift apart on the breakpoint —\n    // and so the two shapes are separate class strings instead of one string\n    // fighting itself through responsive overrides. `useMediaQuery` reads\n    // synchronously on mount, so there is no field→figure flash.\n    const asDisplay = variant === \"display\" && isMobile;\n    const innerRef = useRef<HTMLInputElement>(null);\n    const setRefs = useCallback(\n      (el: HTMLInputElement | null) => {\n        innerRef.current = el;\n        if (typeof ref === \"function\") ref(el);\n        else if (ref) ref.current = el;\n      },\n      [ref],\n    );\n    // The sign is DISPLAYED, not stored (live #201 rework). `value` is the\n    // magnitude; the minus is glued on here and taken off again in handleText, so\n    // the two can never disagree and the caller can never double-apply it. Only in\n    // front of a bare amount: an expression being typed (\"12-30\") owns its own\n    // minus and has to survive keystroke-for-keystroke.\n    const signOwned = onNegativeChange !== undefined;\n    const shown = signOwned && negative && isBareAmount(value) ? `-${value}` : value;\n    // Every route into the field — typing, the numpad sheet, the desktop\n    // calculator, the blur/Enter commit — funnels through here, so the split is\n    // written once and the four entry paths cannot drift.\n    //\n    // `previous` is the text this one REPLACES, and it is what says whether a bare\n    // figure arriving here is an answer or a magnitude. For the three paths that\n    // edit the field's own text that is simply what the field was showing; the\n    // desktop calculator keeps its expression in a popover the field never sees,\n    // so it passes it in (see `CalculatorButton`'s `onChange`).\n    const handleText = (raw: string, previous: string = shown) => {\n      const text = sanitizeLive(raw);\n      if (!signOwned) {\n        onChange(text);\n        return;\n      }\n      const { sign, rest } = splitLeadingSign(text);\n      if (sign) {\n        // SET, not flip: re-reporting the same sign on every keystroke is a no-op.\n        onNegativeChange(sign === \"-\");\n      } else if (looksLikeExpression(previous) && isBareAmount(text) && isResultOf(previous, text)) {\n        // A calculation that just RESOLVED states its sign in both directions. The\n        // figure it ran on is the SIGNED one the user could see — \"-12+30\" is +18 —\n        // so a positive result has to move the chip too, or the field would answer\n        // that sum with \"-18\" and contradict the arithmetic it just showed.\n        //\n        // Only when it really resolved, though: see {@link isResultOf}. A bare figure\n        // arriving on top of an expression is far more often a replacement than an\n        // answer, and reading it as an answer flips the direction of money.\n        onNegativeChange(false);\n      }\n      onChange(sign ? rest : text);\n    };\n    const commit = () => handleText(commitExpression(shown));\n    const { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef } = useDropdownSearch();\n    // The chip the currency list hangs off (Keksdose dev#548). It is portalled now, so\n    // the panel needs a real trigger rect rather than a relative parent — see\n    // `DropdownPanel`'s note for what an `overflow` ancestor did to it before.\n    const chipRef = useRef<HTMLButtonElement>(null);\n\n    const selected = getCurrency(currency);\n    const filtered = useMemo(() => {\n      const q = query.trim().toLowerCase();\n      if (!q) return CURRENCIES;\n      return CURRENCIES.filter(\n        (c) =>\n          c.code.toLowerCase().includes(q) ||\n          c.name.toLowerCase().includes(q) ||\n          c.symbol.toLowerCase().includes(q),\n      );\n    }, [query]);\n\n    return (\n      <div ref={wrapperRef} className={cn(\"w-full\", className)}>\n        {/* Inner relative box holds the input + its absolutely-positioned\n            trailing controls (calculator / currency), so those stay anchored to\n            the INPUT even when the mobile math bar is rendered below (#334). */}\n        <div className=\"relative w-full\">\n        <input\n          ref={setRefs}\n          id={fieldId}\n          aria-label={ariaLabel}\n          type=\"text\"\n          // eslint-disable-next-line jsx-a11y/no-autofocus -- opt-in per call site (feedback #70)\n          autoFocus={autoFocus}\n          // On mobile suppress the OS keyboard so our numpad sheet owns entry; the\n          // field keeps focus/caret. Desktop keeps the native decimal keypad.\n          inputMode={isMobile ? \"none\" : \"decimal\"}\n          autoComplete=\"off\"\n          disabled={disabled}\n          // The floating-label pattern needs a blank placeholder for its\n          // peer-placeholder-shown trick. The display shape has no floating label,\n          // so it spends the placeholder on what an empty borderless form actually\n          // needs: a zero to aim at, at full size. The caller supplies it because\n          // only the app knows the locale's decimal separator.\n          placeholder={asDisplay ? (placeholder ?? \"0\") : label !== undefined ? \" \" : placeholder}\n          value={shown}\n          onChange={(e) => handleText(e.target.value)}\n          onFocus={() => setFocused(true)}\n          onBlur={() => {\n            commit();\n            setFocused(false);\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") commit();\n          }}\n          className={cn(\n            // With a label, use the floating-input padding (pt-4 pb-1) like every\n            // other labelled field so the value sits BELOW the floated label rather\n            // than vertically centred where it overlaps the resting label\n            // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +\n            // transparent-placeholder bits.\n            asDisplay ? DISPLAY_INPUT_CLASS : label !== undefined ? FLOATING_INPUT_CLASS : FIELD_BASE,\n            // Room for the trailing controls. showCalc is always false on a phone,\n            // so the display shape only ever has to clear the currency chip — and\n            // it clears it by the chip's actual width (a text-sm code plus a\n            // chevron, ~58px) rather than the 5rem the boxed shape reserves. On a\n            // 375px screen those 16px are the difference between a readable figure\n            // and a clipped one (feedback #430 rework).\n            asDisplay\n              ? currency ? (editable ? \"pr-16\" : \"pr-12\") : \"pr-0\"\n              : showCalc\n                ? currency ? (editable ? \"pr-24\" : \"pr-16\") : \"pr-10\"\n                : currency ? (editable ? \"pr-20\" : \"pr-14\") : \"pr-3\",\n            // Centred display shape: centre in what is LEFT of the currency chip.\n            // `text-center` alone would centre the figure in the whole box, i.e.\n            // partly underneath the chip; the padding above is what takes the chip\n            // out of the centring, and nothing is added on the left because a\n            // mirrored reservation would spend the width twice (see `align`).\n            asDisplay && align === \"center\" && \"text-center\",\n            // Last, so it wins over the base class's own text colour.\n            TONE_CLASS[tone],\n            invalid && FIELD_INVALID,\n          )}\n          aria-invalid={invalid || undefined}\n        />\n        {label !== undefined && (\n          // The display shape drops the label VISUALLY, not from the accessibility\n          // tree: a 36px tinted figure at the top of a transaction form is legibly\n          // the amount, but a screen reader still needs the name, and callers that\n          // pass `label` without `ariaLabel` would otherwise be left with none.\n          <label htmlFor={fieldId} className={asDisplay ? \"sr-only\" : FLOATING_LABEL_CLASS}>\n            {label}\n          </label>\n        )}\n        {/* Trailing controls share one flex track so the calculator icon and the\n            currency suffix/picker sit side by side without overlapping. */}\n        {/* The display shape has no box to inset from, so the controls align to the\n            figure's own right edge and its baseline strip (`bottom-1`, matching the\n            input's pb-1) instead of floating inside a field. */}\n        <div\n          className={cn(\n            \"absolute flex items-center gap-0.5\",\n            asDisplay ? \"bottom-1 right-0\" : \"inset-y-1 right-1\",\n          )}\n        >\n          {showCalc && (\n            <CalculatorButton\n              value={shown}\n              onChange={handleText}\n              className=\"px-1.5\"\n              ariaLabel={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {currency && !editable && (\n            <span\n              aria-hidden\n              className={cn(\n                \"pointer-events-none px-1 font-medium text-slate-500 dark:text-slate-400\",\n                // A text-xs chip next to a 36px figure reads as a stray footnote.\n                asDisplay ? \"text-sm\" : \"text-xs\",\n              )}\n            >\n              {currency}\n            </span>\n          )}\n          {currency && editable && (\n            <button\n              ref={chipRef}\n              type=\"button\"\n              onClick={() => setOpen((v) => !v)}\n              aria-label={\n                selected ? `${labels?.currency ?? \"Currency\"}: ${selected.code}` : (labels?.currency ?? \"Currency\")\n              }\n              className={cn(\n                \"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\",\n                asDisplay ? \"text-sm\" : \"text-xs\",\n              )}\n            >\n              {currency}\n              <ChevronDown className=\"size-3\" />\n            </button>\n          )}\n        </div>\n        {editable && open && (\n          <DropdownPanel\n            anchorRef={chipRef}\n            panelRef={panelRef}\n            empty={filtered.length === 0}\n            header={\n              <DropdownSearchHeader\n                query={query}\n                onQueryChange={setQuery}\n                inputRef={inputRef}\n                placeholder={labels?.currencySearch ?? \"Search currency\"}\n              />\n            }\n          >\n            {filtered.map((c) => {\n                const active = c.code === selected?.code;\n                return (\n                  <li key={c.code}>\n                    <button\n                      type=\"button\"\n                      onClick={() => {\n                        onCurrencyChange?.(c.code);\n                        setOpen(false);\n                      }}\n                      className={cn(\n                        \"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\",\n                        active && \"bg-slate-100 dark:bg-slate-800\",\n                      )}\n                    >\n                      <CurrencyFlag country={c.country} />\n                      <span className=\"font-mono text-slate-500 dark:text-slate-400 w-8 shrink-0 text-xs\">\n                        {c.symbol}\n                      </span>\n                      <span className=\"font-medium text-slate-900 dark:text-slate-100\">{c.code}</span>\n                      <span className=\"text-slate-500 dark:text-slate-400 truncate text-xs\">{c.name}</span>\n                    </button>\n                  </li>\n                );\n              })}\n          </DropdownPanel>\n        )}\n        </div>\n        {showNumpad && (\n          <NumberPadSheet\n            value={shown}\n            onChange={handleText}\n            onDone={() => innerRef.current?.blur()}\n            label={label}\n            labels={labels?.pad}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nAmountInput.displayName = \"AmountInput\";\n"],"mappings":"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","names":[]}

package/dist/components/calculator.d.ts

@@ -0,0 +1,42 @@
+import * as react from 'react';
+
+/** Screen-reader names for the calculator panel's own controls. */
+interface CalculatorButtonLabels {
+    calculation?: string;
+    backspace?: string;
+    equals?: string;
+}
+interface CalculatorButtonProps {
+    /** Current field text — seeds the keypad so the user can keep calculating
+     * from what's already entered. */
+    value: string;
+    /**
+     * Called with the evaluated result whenever the running expression resolves
+     * to a number, so the host field tracks the keypad live.
+     *
+     * `expression` is the TEXT that result came out of — `"-42+50"` for an 8 — and
+     * is omitted when there was no calculation (a cleared pad). A host that keeps
+     * the sign of its figure OUTSIDE the text (see `AmountInput`'s `negative` /
+     * `onNegativeChange`, where a direction toggle owns it) cannot otherwise tell
+     * that 8 from a freshly typed one: the first is a sum that came out positive
+     * and has to take the direction with it, the second is a magnitude that must
+     * leave the direction alone. Hosts whose text carries its own sign can take
+     * the one argument and ignore this.
+     */
+    onChange: (value: string, expression?: string) => void;
+    className?: string;
+    ariaLabel?: string;
+    /** Screen-reader names for the panel's own controls. `ariaLabel` above already
+     *  covers the trigger; these three were hardcoded English inside the popover,
+     *  which a translating host had no way to reach. */
+    labels?: CalculatorButtonLabels;
+}
+/**
+ * A calculator icon that opens a small keypad popover anchored to its host
+ * field. Designed as a trailing-edge adornment: render it inside the field's
+ * `relative` wrapper, positioned absolutely. The keypad seeds from the current
+ * field value and writes evaluated results straight back through `onChange`.
+ */
+declare function CalculatorButton({ value, onChange, className, ariaLabel, labels, }: CalculatorButtonProps): react.JSX.Element;
+
+export { CalculatorButton, type CalculatorButtonLabels };

package/dist/components/calculator.js

@@ -0,0 +1,161 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Calculator as CalculatorIcon, Delete } from "lucide-react";
+import { Popover } from "./popover.js";
+import { cn } from "../lib/cn.js";
+import { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from "../lib/calc.js";
+const KEYS = [
+  { kind: "ins", label: "7", ins: "7" },
+  { kind: "ins", label: "8", ins: "8" },
+  { kind: "ins", label: "9", ins: "9" },
+  { kind: "ins", label: "\xF7", ins: "\xF7", accent: true },
+  { kind: "ins", label: "4", ins: "4" },
+  { kind: "ins", label: "5", ins: "5" },
+  { kind: "ins", label: "6", ins: "6" },
+  { kind: "ins", label: "\xD7", ins: "\xD7", accent: true },
+  { kind: "ins", label: "1", ins: "1" },
+  { kind: "ins", label: "2", ins: "2" },
+  { kind: "ins", label: "3", ins: "3" },
+  { kind: "ins", label: "\u2212", ins: "\u2212", accent: true },
+  { kind: "ins", label: "0", ins: "0" },
+  { kind: "ins", label: ".", ins: "." },
+  { kind: "back" },
+  { kind: "ins", label: "+", ins: "+", accent: true }
+];
+const KEY_BASE = "flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400";
+const KEY_DIGIT = "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700";
+const KEY_ACCENT = "bg-slate-200 text-slate-700 hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600";
+function seed(initial) {
+  const t = initial.trim();
+  return t === "-" ? "" : t;
+}
+function CalculatorPanel({
+  initial,
+  onChange,
+  labels
+}) {
+  const [expr, setExpr] = useState(() => seed(initial));
+  const inputRef = useRef(null);
+  const host = splitLeadingSign(initial.trim());
+  const text = host.sign === "-" && isBareAmount(expr) && host.rest === expr.trim() ? initial.trim() : expr;
+  const result = evaluateExpression(text);
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+  const apply = (next) => {
+    setExpr(next);
+    const n = evaluateExpression(next);
+    if (n !== null) onChange(formatResult(n), next);
+  };
+  const clearAll = () => {
+    setExpr("");
+    onChange("");
+  };
+  const equals = () => {
+    if (result === null) return;
+    const out = formatResult(result);
+    setExpr(out);
+    onChange(out, text);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        "aria-label": labels?.calculation ?? "Calculation",
+        value: text,
+        inputMode: "decimal",
+        onChange: (e) => apply(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            equals();
+          }
+        },
+        className: "block w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 text-right font-mono text-sm text-slate-900 focus:border-slate-500 focus:ring-slate-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100 dark:focus:border-slate-400"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "h-4 pr-1 text-right font-mono text-xs text-slate-400 dark:text-slate-500", children: result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : "" }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-1.5", children: [
+      KEYS.map(
+        (key, i) => key.kind === "back" ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": labels?.backspace ?? "Backspace",
+            onClick: () => apply(text.slice(0, -1)),
+            className: cn(KEY_BASE, KEY_ACCENT),
+            children: /* @__PURE__ */ jsx(Delete, { className: "size-4" })
+          },
+          "back"
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => apply(text + key.ins),
+            className: cn(KEY_BASE, key.accent ? KEY_ACCENT : KEY_DIGIT),
+            children: key.label
+          },
+          `${key.ins}-${i}`
+        )
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: clearAll,
+          className: cn(KEY_BASE, "col-span-2 bg-slate-200 text-slate-700 hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600"),
+          children: "C"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": labels?.equals ?? "Equals",
+          onClick: equals,
+          className: cn(
+            KEY_BASE,
+            "col-span-2 bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
+          ),
+          children: "="
+        }
+      )
+    ] })
+  ] });
+}
+function CalculatorButton({
+  value,
+  onChange,
+  className,
+  ariaLabel = "Open calculator",
+  labels
+}) {
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      width: 224,
+      trigger: ({ open, toggle, ref }) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          tabIndex: -1,
+          onClick: toggle,
+          "aria-label": ariaLabel,
+          "aria-expanded": open,
+          className: cn(
+            "flex items-center justify-center text-slate-400 transition-colors hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300",
+            className
+          ),
+          children: /* @__PURE__ */ jsx(CalculatorIcon, { className: "size-4" })
+        }
+      ),
+      children: () => /* @__PURE__ */ jsx(CalculatorPanel, { initial: value, onChange, labels })
+    }
+  );
+}
+export {
+  CalculatorButton
+};
+//# sourceMappingURL=calculator.js.map

package/dist/components/calculator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/calculator.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Calculator as CalculatorIcon, Delete } from \"lucide-react\";\nimport { Popover } from \"./popover\";\nimport { cn } from \"../lib/cn\";\nimport { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from \"../lib/calc\";\n\n/** Screen-reader names for the calculator panel's own controls. */\nexport interface CalculatorButtonLabels {\n  calculation?: string;\n  backspace?: string;\n  equals?: string;\n}\n\ninterface CalculatorButtonProps {\n  /** Current field text — seeds the keypad so the user can keep calculating\n   * from what's already entered. */\n  value: string;\n  /**\n   * Called with the evaluated result whenever the running expression resolves\n   * to a number, so the host field tracks the keypad live.\n   *\n   * `expression` is the TEXT that result came out of — `\"-42+50\"` for an 8 — and\n   * is omitted when there was no calculation (a cleared pad). A host that keeps\n   * the sign of its figure OUTSIDE the text (see `AmountInput`'s `negative` /\n   * `onNegativeChange`, where a direction toggle owns it) cannot otherwise tell\n   * that 8 from a freshly typed one: the first is a sum that came out positive\n   * and has to take the direction with it, the second is a magnitude that must\n   * leave the direction alone. Hosts whose text carries its own sign can take\n   * the one argument and ignore this.\n   */\n  onChange: (value: string, expression?: string) => void;\n  className?: string;\n  ariaLabel?: string;\n  /** Screen-reader names for the panel's own controls. `ariaLabel` above already\n   *  covers the trigger; these three were hardcoded English inside the popover,\n   *  which a translating host had no way to reach. */\n  labels?: CalculatorButtonLabels;\n}\n\n/** Keypad layout (4 columns). The final C/= row is rendered separately. */\ntype Key =\n  | { kind: \"ins\"; label: string; ins: string; accent?: boolean }\n  | { kind: \"back\" };\n\nconst KEYS: Key[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"−\", accent: true },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"ins\", label: \".\", ins: \".\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true },\n];\n\nconst KEY_BASE =\n  \"flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400\";\nconst KEY_DIGIT =\n  \"bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700\";\nconst KEY_ACCENT =\n  \"bg-slate-200 text-slate-700 hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600\";\n\nfunction seed(initial: string): string {\n  const t = initial.trim();\n  return t === \"-\" ? \"\" : t;\n}\n\nfunction CalculatorPanel({\n  initial,\n  onChange,\n  labels,\n}: {\n  initial: string;\n  onChange: (value: string, expression?: string) => void;\n  labels?: CalculatorButtonLabels;\n}) {\n  const [expr, setExpr] = useState(() => seed(initial));\n  const inputRef = useRef<HTMLInputElement>(null);\n  // What the pad SHOWS. Normally the expression it holds — but when the host owns\n  // the sign of the figure, the magnitude it hands back is not the whole number:\n  // type 50 into a pad opened on an outflow and the host answers \"-50\". Derived\n  // rather than stored, so there is no echo to guard against and a host that\n  // ignores `onChange` entirely (a static `value`) still sees its own keystrokes:\n  // the pad only defers when the host's text is character-for-character its own\n  // last number with a minus in front.\n  const host = splitLeadingSign(initial.trim());\n  const text = host.sign === \"-\" && isBareAmount(expr) && host.rest === expr.trim() ? initial.trim() : expr;\n  const result = evaluateExpression(text);\n\n  // Focus the display on open so the user can type or hit Enter immediately.\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  // Update the host field whenever the expression resolves to a number; an\n  // incomplete expression (e.g. \"12+\") simply leaves the field untouched. The\n  // expression rides along with the result — see `onChange` above.\n  const apply = (next: string) => {\n    setExpr(next);\n    const n = evaluateExpression(next);\n    if (n !== null) onChange(formatResult(n), next);\n  };\n\n  const clearAll = () => {\n    setExpr(\"\");\n    onChange(\"\");\n  };\n\n  const equals = () => {\n    if (result === null) return;\n    const out = formatResult(result);\n    setExpr(out);\n    onChange(out, text);\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      <input\n        ref={inputRef}\n        aria-label={labels?.calculation ?? \"Calculation\"}\n        value={text}\n        inputMode=\"decimal\"\n        onChange={(e) => apply(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            equals();\n          }\n        }}\n        className=\"block w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 text-right font-mono text-sm text-slate-900 focus:border-slate-500 focus:ring-slate-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100 dark:focus:border-slate-400\"\n      />\n      <div className=\"h-4 pr-1 text-right font-mono text-xs text-slate-400 dark:text-slate-500\">\n        {result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : \"\"}\n      </div>\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={labels?.backspace ?? \"Backspace\"}\n              onClick={() => apply(text.slice(0, -1))}\n              className={cn(KEY_BASE, KEY_ACCENT)}\n            >\n              <Delete className=\"size-4\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              onClick={() => apply(text + key.ins)}\n              className={cn(KEY_BASE, key.accent ? KEY_ACCENT : KEY_DIGIT)}\n            >\n              {key.label}\n            </button>\n          ),\n        )}\n        <button\n          type=\"button\"\n          onClick={clearAll}\n          className={cn(KEY_BASE, \"col-span-2 bg-slate-200 text-slate-700 hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600\")}\n        >\n          C\n        </button>\n        <button\n          type=\"button\"\n          aria-label={labels?.equals ?? \"Equals\"}\n          onClick={equals}\n          className={cn(\n            KEY_BASE,\n            \"col-span-2 bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white\",\n          )}\n        >\n          =\n        </button>\n      </div>\n    </div>\n  );\n}\n\n/**\n * A calculator icon that opens a small keypad popover anchored to its host\n * field. Designed as a trailing-edge adornment: render it inside the field's\n * `relative` wrapper, positioned absolutely. The keypad seeds from the current\n * field value and writes evaluated results straight back through `onChange`.\n */\nexport function CalculatorButton({\n  value,\n  onChange,\n  className,\n  ariaLabel = \"Open calculator\",\n  labels,\n}: CalculatorButtonProps) {\n  return (\n    <Popover\n      width={224}\n      trigger={({ open, toggle, ref }) => (\n        <button\n          ref={ref}\n          type=\"button\"\n          tabIndex={-1}\n          onClick={toggle}\n          aria-label={ariaLabel}\n          aria-expanded={open}\n          className={cn(\n            \"flex items-center justify-center text-slate-400 transition-colors hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300\",\n            className,\n          )}\n        >\n          <CalculatorIcon className=\"size-4\" />\n        </button>\n      )}\n    >\n      {() => <CalculatorPanel initial={value} onChange={onChange} labels={labels} />}\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/chart.d.ts

@@ -0,0 +1,58 @@
+import * as recharts from 'recharts';
+import { ResponsiveContainer, Tooltip } from 'recharts';
+import * as react from 'react';
+import { ReactNode, ComponentProps, RefObject } from 'react';
+
+interface ChartSeriesConfig {
+    label: ReactNode;
+    color: string;
+}
+type ChartConfig = Record<string, ChartSeriesConfig>;
+declare function useChart(): ChartConfig;
+interface ChartContainerProps extends ComponentProps<"div"> {
+    config: ChartConfig;
+    children: ComponentProps<typeof ResponsiveContainer>["children"];
+}
+declare function ChartContainer({ id, className, children, config, ...props }: ChartContainerProps): react.JSX.Element;
+declare const ChartTooltip: typeof Tooltip;
+declare const ChartLegend: react.MemoExoticComponent<(outsideProps: recharts.LegendProps) => React.ReactPortal | null>;
+interface TooltipPayloadItem {
+    dataKey?: string | number;
+    name?: string | number;
+    value?: number | string;
+    color?: string;
+    payload?: Record<string, unknown>;
+}
+interface ChartTooltipContentProps {
+    active?: boolean;
+    payload?: TooltipPayloadItem[];
+    label?: string | number;
+    indicator?: "dot" | "line";
+    hideLabel?: boolean;
+    labelFormatter?: (label: string | number) => ReactNode;
+    valueFormatter?: (value: number) => string;
+    /** Cursor position within the chart, injected by recharts. Used with
+     *  {@link boundaryRef} to decide whether to flip the tooltip. */
+    coordinate?: {
+        x?: number;
+        y?: number;
+    };
+    /** When set, the tooltip flips to the LEFT of the cursor if it would otherwise
+     *  spill past the right edge of this (usually horizontally-scrolling) container
+     *  — e.g. a wide chart whose rightmost bars sat off-screen (feedback #77). */
+    boundaryRef?: RefObject<HTMLElement | null>;
+}
+declare function ChartTooltipContent({ active, payload, label, indicator, hideLabel, labelFormatter, valueFormatter, coordinate, boundaryRef, }: ChartTooltipContentProps): react.JSX.Element | null;
+interface LegendPayloadItem {
+    value?: string;
+    dataKey?: string | number;
+    color?: string;
+}
+interface ChartLegendContentProps {
+    payload?: LegendPayloadItem[];
+    onItemClick?: (key: string) => void;
+    activeKey?: string | null;
+}
+declare function ChartLegendContent({ payload, onItemClick, activeKey }: ChartLegendContentProps): react.JSX.Element | null;
+
+export { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, type ChartSeriesConfig, ChartTooltip, ChartTooltipContent, useChart };