@eifi1/ui-kit 0.21.0 → 0.23.0

package/dist/components/money-field.d.ts

@@ -2,17 +2,21 @@ import * as react from 'react';
 import { ComponentProps, Ref } from 'react';
 import { AmountInput } from './amount-input.js';
 import './calculator.js';
-import '../kit-labels-D1J2_jyD.js';
-import './data-table-labels.js';
+import '../feedback-BxeQVzwq.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import '../feedback/feedback-inbox.js';
+import 'lucide-react';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import './chip.js';
-import 'lucide-react';
 import './field-sync.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -26,7 +30,6 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
-import './danger-confirm.js';
 import './swatch-picker.js';
 import './tile-radio.js';
 import './icon-picker.js';
@@ -34,11 +37,7 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback-attachment-WFiXJ8We.js';
-import '../feedback/feedback-thread.js';
-import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
-import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
@@ -57,14 +56,20 @@ import './write-lock.js';
 import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
-import '../data-table-3mi2R3so.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
 import './translation-review-labels.js';
 import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';
+import './column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import './field-parts.js';
 import './numpad-sheet.js';
 
 type AmountInputProps = ComponentProps<typeof AmountInput>;
@@ -93,6 +98,19 @@ interface MoneyFieldProps extends Omit<AmountInputProps, "value" | "onChange" |
  * rounding to the currency's minor unit and `min` / `max` are AmountInput's. A caller-
  * owned sign (`negative`) is not offered: the figure here carries its own minus.
  *
+ * So are two props a table cell needs (keksdose K4, K6): `error`, the message under the
+ * field that paints and describes it like {@link Input}'s, and `calculator={false}`,
+ * for an amount in a close-on-blur inline editor, where a click on the calculator icon
+ * blurs the field and tears the editor down before the popover can open (typed
+ * calculations still evaluate).
+ *
+ * `inputClassName` (0.23, keksdose G7) styles the `<input>` itself — `text-end` for a
+ * money column — where `className` sizes the wrapper; see {@link AmountInput}'s.
+ *
+ * This, not a `NumberField` with `digits={2}`, is the number-valued field for money:
+ * it settles to the CURRENCY's minor unit (JPY 0, CHF 2) and `digits` takes a unit
+ * price's finer scale (kastlan 5).
+ *
  * ```tsx
  * <MoneyField ariaLabel="Amount" currency="CHF" value={row.amount}
  *   onCommit={(amount) => updateRow(row.id, { amount })} />

package/dist/components/money-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/money-field.tsx"],"sourcesContent":["import { useState, type ComponentProps, type Ref } from \"react\";\nimport { AmountInput } from \"./amount-input\";\n\ntype AmountInputProps = ComponentProps<typeof AmountInput>;\n\nexport interface MoneyFieldProps\n  extends Omit<AmountInputProps, \"value\" | \"onChange\" | \"onCommit\" | \"negative\" | \"onNegativeChange\" | \"ref\"> {\n  /** The amount, or `null` for an empty field. */\n  value: number | null;\n  /**\n   * The settled amount — on blur, on Enter, on the numpad's \"=\" and on a calculator\n   * result; never a half-typed \"1200+\". Rounded to the currency's minor unit (or\n   * `digits`) and clamped to `min` / `max`, like {@link AmountInput}. `null` when the\n   * field was emptied. Not fired when the settled amount equals `value`, so an\n   * Enter-then-blur saves once.\n   */\n  onCommit: (value: number | null) => void;\n  ref?: Ref<HTMLInputElement>;\n}\n\n/** The number a settled text reads as: `null` for empty, `undefined` for no number\n *  (a lone \"-\" or \".\"). */\nfunction parseSettled(text: string): number | null | undefined {\n  const t = text.trim();\n  if (t === \"\") return null;\n  const n = Number(t);\n  return Number.isFinite(n) ? n : undefined;\n}\n\n/**\n * {@link AmountInput} with a NUMBER in and a number out, for money edited outside a\n * form — a budget row, a table cell (kastlan 52: new-budget-page edited a CHF amount per\n * row with `NumberField` because AmountInput is string-valued and reports every\n * keystroke, \"1200+\" included, so a number-state row needed its own parse-and-settle\n * glue). This is that glue, the same one `RhfMoneyField` has: the text being typed\n * lives here, and only a settled figure reaches `onCommit`.\n *\n * The currency chip, the calculator, the numpad, the locale's decimal mark, the\n * rounding to the currency's minor unit and `min` / `max` are AmountInput's. A caller-\n * owned sign (`negative`) is not offered: the figure here carries its own minus.\n *\n * ```tsx\n * <MoneyField ariaLabel=\"Amount\" currency=\"CHF\" value={row.amount}\n *   onCommit={(amount) => updateRow(row.id, { amount })} />\n * ```\n */\nexport function MoneyField({ value, onCommit, ref, ...props }: MoneyFieldProps) {\n  const external = value === null ? \"\" : String(value);\n  // The draft is re-read from `value` only when `value` moves away from what the draft\n  // already says (a reset, another row's save), so a commit's own echo keeps the\n  // typist's spelling (\"12.50\" stays \"12.50\" when 12.5 comes back).\n  const [draft, setDraft] = useState(external);\n  const [seen, setSeen] = useState(value);\n  if (seen !== value) {\n    setSeen(value);\n    if (parseSettled(draft) !== value) setDraft(external);\n  }\n  return (\n    <AmountInput\n      {...props}\n      ref={ref}\n      value={draft}\n      onChange={setDraft}\n      onCommit={(text) => {\n        const next = parseSettled(text);\n        // No number (\"-\" alone): back to the stored amount rather than a guess.\n        if (next === undefined) {\n          setDraft(external);\n          return;\n        }\n        if (next !== value) onCommit(next);\n      }}\n    />\n  );\n}\n"],"mappings":";AA0DI;AA1DJ,SAAS,gBAA+C;AACxD,SAAS,mBAAmB;AAqB5B,SAAS,aAAa,MAAyC;AAC7D,QAAM,IAAI,KAAK,KAAK;AACpB,MAAI,MAAM,GAAI,QAAO;AACrB,QAAM,IAAI,OAAO,CAAC;AAClB,SAAO,OAAO,SAAS,CAAC,IAAI,IAAI;AAClC;AAmBO,SAAS,WAAW,EAAE,OAAO,UAAU,KAAK,GAAG,MAAM,GAAoB;AAC9E,QAAM,WAAW,UAAU,OAAO,KAAK,OAAO,KAAK;AAInD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,QAAQ;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,MAAI,SAAS,OAAO;AAClB,YAAQ,KAAK;AACb,QAAI,aAAa,KAAK,MAAM,MAAO,UAAS,QAAQ;AAAA,EACtD;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU,CAAC,SAAS;AAClB,cAAM,OAAO,aAAa,IAAI;AAE9B,YAAI,SAAS,QAAW;AACtB,mBAAS,QAAQ;AACjB;AAAA,QACF;AACA,YAAI,SAAS,MAAO,UAAS,IAAI;AAAA,MACnC;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/money-field.tsx"],"sourcesContent":["import { useState, type ComponentProps, type Ref } from \"react\";\nimport { AmountInput } from \"./amount-input\";\n\ntype AmountInputProps = ComponentProps<typeof AmountInput>;\n\nexport interface MoneyFieldProps\n  extends Omit<AmountInputProps, \"value\" | \"onChange\" | \"onCommit\" | \"negative\" | \"onNegativeChange\" | \"ref\"> {\n  /** The amount, or `null` for an empty field. */\n  value: number | null;\n  /**\n   * The settled amount — on blur, on Enter, on the numpad's \"=\" and on a calculator\n   * result; never a half-typed \"1200+\". Rounded to the currency's minor unit (or\n   * `digits`) and clamped to `min` / `max`, like {@link AmountInput}. `null` when the\n   * field was emptied. Not fired when the settled amount equals `value`, so an\n   * Enter-then-blur saves once.\n   */\n  onCommit: (value: number | null) => void;\n  ref?: Ref<HTMLInputElement>;\n}\n\n/** The number a settled text reads as: `null` for empty, `undefined` for no number\n *  (a lone \"-\" or \".\"). */\nfunction parseSettled(text: string): number | null | undefined {\n  const t = text.trim();\n  if (t === \"\") return null;\n  const n = Number(t);\n  return Number.isFinite(n) ? n : undefined;\n}\n\n/**\n * {@link AmountInput} with a NUMBER in and a number out, for money edited outside a\n * form — a budget row, a table cell (kastlan 52: new-budget-page edited a CHF amount per\n * row with `NumberField` because AmountInput is string-valued and reports every\n * keystroke, \"1200+\" included, so a number-state row needed its own parse-and-settle\n * glue). This is that glue, the same one `RhfMoneyField` has: the text being typed\n * lives here, and only a settled figure reaches `onCommit`.\n *\n * The currency chip, the calculator, the numpad, the locale's decimal mark, the\n * rounding to the currency's minor unit and `min` / `max` are AmountInput's. A caller-\n * owned sign (`negative`) is not offered: the figure here carries its own minus.\n *\n * So are two props a table cell needs (keksdose K4, K6): `error`, the message under the\n * field that paints and describes it like {@link Input}'s, and `calculator={false}`,\n * for an amount in a close-on-blur inline editor, where a click on the calculator icon\n * blurs the field and tears the editor down before the popover can open (typed\n * calculations still evaluate).\n *\n * `inputClassName` (0.23, keksdose G7) styles the `<input>` itself — `text-end` for a\n * money column — where `className` sizes the wrapper; see {@link AmountInput}'s.\n *\n * This, not a `NumberField` with `digits={2}`, is the number-valued field for money:\n * it settles to the CURRENCY's minor unit (JPY 0, CHF 2) and `digits` takes a unit\n * price's finer scale (kastlan 5).\n *\n * ```tsx\n * <MoneyField ariaLabel=\"Amount\" currency=\"CHF\" value={row.amount}\n *   onCommit={(amount) => updateRow(row.id, { amount })} />\n * ```\n */\nexport function MoneyField({ value, onCommit, ref, ...props }: MoneyFieldProps) {\n  const external = value === null ? \"\" : String(value);\n  // The draft is re-read from `value` only when `value` moves away from what the draft\n  // already says (a reset, another row's save), so a commit's own echo keeps the\n  // typist's spelling (\"12.50\" stays \"12.50\" when 12.5 comes back).\n  const [draft, setDraft] = useState(external);\n  const [seen, setSeen] = useState(value);\n  if (seen !== value) {\n    setSeen(value);\n    if (parseSettled(draft) !== value) setDraft(external);\n  }\n  return (\n    <AmountInput\n      {...props}\n      ref={ref}\n      value={draft}\n      onChange={setDraft}\n      onCommit={(text) => {\n        const next = parseSettled(text);\n        // No number (\"-\" alone): back to the stored amount rather than a guess.\n        if (next === undefined) {\n          setDraft(external);\n          return;\n        }\n        if (next !== value) onCommit(next);\n      }}\n    />\n  );\n}\n"],"mappings":";AAuEI;AAvEJ,SAAS,gBAA+C;AACxD,SAAS,mBAAmB;AAqB5B,SAAS,aAAa,MAAyC;AAC7D,QAAM,IAAI,KAAK,KAAK;AACpB,MAAI,MAAM,GAAI,QAAO;AACrB,QAAM,IAAI,OAAO,CAAC;AAClB,SAAO,OAAO,SAAS,CAAC,IAAI,IAAI;AAClC;AAgCO,SAAS,WAAW,EAAE,OAAO,UAAU,KAAK,GAAG,MAAM,GAAoB;AAC9E,QAAM,WAAW,UAAU,OAAO,KAAK,OAAO,KAAK;AAInD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,QAAQ;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,MAAI,SAAS,OAAO;AAClB,YAAQ,KAAK;AACb,QAAI,aAAa,KAAK,MAAM,MAAO,UAAS,QAAQ;AAAA,EACtD;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU,CAAC,SAAS;AAClB,cAAM,OAAO,aAAa,IAAI;AAE9B,YAAI,SAAS,QAAW;AACtB,mBAAS,QAAQ;AACjB;AAAA,QACF;AACA,YAAI,SAAS,MAAO,UAAS,IAAI;AAAA,MACnC;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/month-picker.d.ts

@@ -23,6 +23,15 @@ interface MonthPickerLabels {
     nextMonth: string;
     /** `variant="stepper"`: the button that jumps to the current month. Visible text. */
     today: string;
+    /** `mode="year"`: the popover's accessible name. */
+    yearPanel: string;
+    /** `mode="year"`: the icon-only arrows that page the year grid back and forward by a
+     *  page of twelve years. */
+    earlierYears: string;
+    laterYears: string;
+    /** `mode="year"`, `variant="stepper"`: the button that jumps to the current year.
+     *  Visible text. */
+    thisYear: string;
 }
 /** The English starting point every override is merged onto. Exported (unlike the
  *  calendar's) because it is asked for by name: a host building its own translation
@@ -64,7 +73,45 @@ interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onChan
     disabled?: boolean;
     /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
     invalid?: boolean;
-    /** Intl options for the trigger's text (default: long month + numeric year). */
+    /**
+     * What is wrong with the month, in the caller's words — {@link Input}'s `error`
+     * (keksdose K4): under the field, attached to the trigger with `aria-describedby`
+     * (merged, after any caption), and implies `invalid`. Passing the key keeps the
+     * field's box while there is no message, so the trigger is never remounted.
+     */
+    error?: ReactNode;
+    /** Standing advice, as on a {@link Select}: text is a caption under the field; a
+     *  {@link FieldHint} rides the label line. */
+    hint?: ReactNode;
+    /**
+     * `"md"` (default): the form field. `"sm"`: the toolbar trigger — 36px tall (an
+     * `IconButton`'s height) and as wide as the month it shows, for a picker that sits
+     * between two icon buttons in a page header (keksdose K13: the budget header wrote
+     * `triggerClassName="h-9 w-auto … py-0"` by hand, live #260 — 34px between two 36px
+     * buttons, *"the kind of 2px that reads as sloppy"*). Unlabelled pickers only, as on
+     * {@link Select}: a floating label needs the tall box to float in. The width follows
+     * the month's name; add a `min-w-*` in `triggerClassName` if the buttons beside it
+     * must not move as it changes.
+     */
+    size?: "sm" | "md";
+    /**
+     * `"month"` (default): the value is a month, `"YYYY-MM"`.
+     *
+     * `"year"`: the value is a YEAR, `"YYYY"`, and the panel is a grid of years — kastlan's
+     * budget fiscal year (a `Select` of 2020 to three years ahead) and keksdose's tax tab
+     * ("this year and four before", tax-tab.tsx:33). `min` / `max` are read as their year
+     * (`"2022"`, or any longer key). A bounded span of twelve years or fewer is shown
+     * whole, with no paging; otherwise the grid pages twelve years at a time (PageUp /
+     * PageDown, or the arrows), starting from `min` when there is one. The stepper
+     * variant steps a year, and its Today button reads "This year".
+     *
+     * A string rather than a number, for the reason the month key is one: it is the
+     * same type across both modes, it crosses a URL as is, and it sorts. A numeric
+     * caller converts with `String(year)` and `Number(key)`.
+     */
+    mode?: "month" | "year";
+    /** Intl options for the trigger's text (default: long month + numeric year, or the
+     *  numeric year in `mode="year"`). Win over the provider's `formatDate`. */
     formatOptions?: Intl.DateTimeFormatOptions;
     /**
      * The month to ring as "now", as `"YYYY-MM"`. Defaults to the local calendar's
@@ -84,8 +131,9 @@ interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onChan
      * `"stepper"`: the header of a month PAGE — the month as a heading that opens the
      * grid, then Today and ‹ › stepping the value by one month. What a calendar page
      * assembled by hand around the field (overriding its trigger to look like a
-     * heading). `label`, `placeholder`, `invalid` and `triggerClassName` are the field's
-     * and are not drawn here; with no `value` the arrows step from the current month.
+     * heading). `label`, `placeholder`, `invalid`, `hint`, `error`, `size` and
+     * `triggerClassName` are the field's and are not drawn here; with no `value` the
+     * arrows step from the current month (or year).
      */
     variant?: "field" | "stepper";
     /** `variant="stepper"`: the heading level the month is set in (`<h2>` by default), or
@@ -94,6 +142,6 @@ interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onChan
     /** `variant="stepper"`: draw the Today button. Default `true`. */
     showToday?: boolean;
 }
-declare function MonthPicker({ value, onChange, locale: localeProp, min, max, label, placeholder, disabled, invalid, formatOptions, currentMonth, labels: labelsProp, className, triggerClassName, variant, headingLevel, showToday, ...rest }: MonthPickerProps): react.JSX.Element;
+declare function MonthPicker(props: MonthPickerProps): react.JSX.Element;
 
 export { DEFAULT_MONTH_PICKER_LABELS, MonthPicker, type MonthPickerLabels, type MonthPickerProps };