@eifi1/ui-kit 0.56.0 → 0.57.0

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

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+import { type QuantityInputProps } from "./quantity-input.js";
+import { type FieldHelpProps } from "./field-parts.js";
+import { type Quantity } from "../lib/quantity.js";
+/** {@link QuantityField}'s props: {@link QuantityInput}'s, and a field's anatomy. */
+export interface QuantityFieldProps extends QuantityInputProps, FieldHelpProps {
+    /** The visible label, floating in the amount's box as NumberField's does. Without one,
+     *  name the field with `aria-label`. */
+    label?: ReactNode;
+    /** A fact under the field, on its description — or a `FieldHint` on the label's line
+     *  (its words at Large and on touch, §4) — as on every kit field. */
+    hint?: ReactNode;
+    /** What is wrong, in the caller's words: under the field, on its description, and it
+     *  paints both controls. `null`, `false` and `""` are no message. */
+    error?: ReactNode;
+    /** Announced as required (`aria-required` on the amount). Whether it IS required is the
+     *  form's validation to say. */
+    required?: boolean;
+    /**
+     * A quantity to take with one tap — the household's usual pack, the last one bought: a
+     * line under the field, "Suggested · 500 g", whose quantity is a button that sets the
+     * value to it (amount and unit). Shown while it is passed and has an amount; the app
+     * stops passing it when it no longer applies. Taking it when the value already is it
+     * changes nothing, so the button keeps its place and its focus.
+     */
+    suggestion?: Quantity;
+    /** Where the suggestion comes from, in the app's words ("Usual pack", "Last time") —
+     *  FieldSuggestion's `from`. Default the kit's "Suggested" (`quantity.suggested`). */
+    suggestionFrom?: ReactNode;
+    /** The field's box — a width, a grid cell. `inputClassName` and `selectClassName`
+     *  reach the two controls. */
+    className?: string;
+}
+/**
+ * {@link QuantityInput} as a labelled field: the label floating in the amount's box, the
+ * unit select beside it, and under both the suggestion to take, the caption and the error.
+ *
+ * ```tsx
+ * <QuantityField
+ *   label="Flour"
+ *   family="mass"
+ *   value={qty}
+ *   onChange={setQty}
+ *   suggestion={{ amount: 1, unit: "kg" }}
+ *   suggestionFrom="Usual pack"
+ * />
+ * ```
+ *
+ * The amount and the unit are one field to a screen reader: the amount is named by the
+ * label, the select "Unit for “<label>”", and both are described by the same suggestion,
+ * caption and error. Tab goes amount → unit → the suggestion's button.
+ *
+ * `className` is the field's box (a width, a grid cell); `inputClassName` and
+ * `selectClassName` reach the two controls.
+ */
+export declare function QuantityField(props: QuantityFieldProps): import("react").JSX.Element;
+/** @internal QuantityField, with the name its unit select is called by when the label is
+ *  drawn outside it — RhfQuantityField's, above. Not on the barrel. */
+export declare function QuantityFieldBody(props: QuantityFieldProps & {
+    fieldName?: string;
+}): import("react").JSX.Element;

package/dist/components/quantity-field.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { QuantityRow, DEFAULT_QUANTITY_LABELS } from "./quantity-input.js";
+import { FIELD_CAPTION_CLASS, mergeDescribedBy, useFieldMessages } from "./field-parts.js";
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { cn } from "../lib/cn.js";
+import { dataAttributes } from "../lib/data-attributes.js";
+import { hasContent } from "../lib/presence.js";
+import { formatQuantity } from "../lib/quantity.js";
+function same(a, b) {
+  return a.unit === b.unit && Object.is(a.amount, b.amount);
+}
+function QuantityField(props) {
+  return /* @__PURE__ */ jsx(QuantityFieldBody, { ...props });
+}
+function QuantityFieldBody(props) {
+  const {
+    ref,
+    label,
+    hint,
+    help,
+    error,
+    required,
+    suggestion,
+    suggestionFrom,
+    fieldName,
+    className,
+    invalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    ...rest
+  } = props;
+  const labels = useKitLabels("quantity", DEFAULT_QUANTITY_LABELS, rest.labels);
+  const locale = useKitLocale(rest.locale);
+  const name = label ?? rest["aria-label"];
+  const offer = suggestion !== void 0 && suggestion.amount !== null && Number.isFinite(suggestion.amount);
+  const suggestionId = useId();
+  const messages = useFieldMessages({
+    hint,
+    help,
+    name,
+    error,
+    invalid,
+    describedBy: mergeDescribedBy(ariaDescribedBy, offer && suggestionId),
+    ariaInvalid
+  });
+  const shown = offer ? formatQuantity(suggestion, locale, { labels }) : "";
+  const take = () => {
+    if (!offer || rest.disabled) return;
+    if (!same(suggestion, rest.value)) rest.onChange({ amount: suggestion.amount, unit: suggestion.unit });
+  };
+  const rowProps = Object.fromEntries(Object.entries(rest).filter(([key]) => !key.startsWith("data-")));
+  return /* @__PURE__ */ jsxs("div", { ...dataAttributes(props), className, children: [
+    /* @__PURE__ */ jsx(
+      QuantityRow,
+      {
+        ...rowProps,
+        ref,
+        label,
+        labelHint: messages.labelHint,
+        fieldName,
+        "aria-describedby": messages.describedBy,
+        "aria-required": required || ariaRequired || void 0,
+        invalid: messages.isInvalid
+      }
+    ),
+    offer && /* @__PURE__ */ jsxs("p", { id: suggestionId, "data-slot": "quantity-suggestion", className: FIELD_CAPTION_CLASS, children: [
+      hasContent(suggestionFrom) ? suggestionFrom : labels.suggested,
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: take,
+          disabled: rest.disabled,
+          "aria-label": labels.takeSuggestion(shown),
+          className: cn(
+            "rounded-sm font-medium text-secondary underline underline-offset-2 transition-colors hover:text-primary",
+            "focus-visible:outline-focus focus-visible:outline-offset-2 focus-visible:outline-brand",
+            "disabled:cursor-default disabled:no-underline disabled:opacity-50"
+          ),
+          children: shown
+        }
+      )
+    ] }),
+    messages.below
+  ] });
+}
+export {
+  QuantityField,
+  QuantityFieldBody
+};
+//# sourceMappingURL=quantity-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/quantity-field.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { QuantityRow, DEFAULT_QUANTITY_LABELS, type QuantityInputProps } from \"./quantity-input\";\nimport { FIELD_CAPTION_CLASS, mergeDescribedBy, useFieldMessages, type FieldHelpProps } from \"./field-parts\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { dataAttributes } from \"../lib/data-attributes\";\nimport { hasContent } from \"../lib/presence\";\nimport { formatQuantity, type Quantity } from \"../lib/quantity\";\n\n/** {@link QuantityField}'s props: {@link QuantityInput}'s, and a field's anatomy. */\nexport interface QuantityFieldProps extends QuantityInputProps, FieldHelpProps {\n  /** The visible label, floating in the amount's box as NumberField's does. Without one,\n   *  name the field with `aria-label`. */\n  label?: ReactNode;\n  /** A fact under the field, on its description — or a `FieldHint` on the label's line\n   *  (its words at Large and on touch, §4) — as on every kit field. */\n  hint?: ReactNode;\n  /** What is wrong, in the caller's words: under the field, on its description, and it\n   *  paints both controls. `null`, `false` and `\"\"` are no message. */\n  error?: ReactNode;\n  /** Announced as required (`aria-required` on the amount). Whether it IS required is the\n   *  form's validation to say. */\n  required?: boolean;\n  /**\n   * A quantity to take with one tap — the household's usual pack, the last one bought: a\n   * line under the field, \"Suggested · 500 g\", whose quantity is a button that sets the\n   * value to it (amount and unit). Shown while it is passed and has an amount; the app\n   * stops passing it when it no longer applies. Taking it when the value already is it\n   * changes nothing, so the button keeps its place and its focus.\n   */\n  suggestion?: Quantity;\n  /** Where the suggestion comes from, in the app's words (\"Usual pack\", \"Last time\") —\n   *  FieldSuggestion's `from`. Default the kit's \"Suggested\" (`quantity.suggested`). */\n  suggestionFrom?: ReactNode;\n  /** The field's box — a width, a grid cell. `inputClassName` and `selectClassName`\n   *  reach the two controls. */\n  className?: string;\n}\n\n/** Two quantities that say the same: same unit, same amount. */\nfunction same(a: Quantity, b: Quantity): boolean {\n  return a.unit === b.unit && Object.is(a.amount, b.amount);\n}\n\n/**\n * {@link QuantityInput} as a labelled field: the label floating in the amount's box, the\n * unit select beside it, and under both the suggestion to take, the caption and the error.\n *\n * ```tsx\n * <QuantityField\n *   label=\"Flour\"\n *   family=\"mass\"\n *   value={qty}\n *   onChange={setQty}\n *   suggestion={{ amount: 1, unit: \"kg\" }}\n *   suggestionFrom=\"Usual pack\"\n * />\n * ```\n *\n * The amount and the unit are one field to a screen reader: the amount is named by the\n * label, the select \"Unit for “<label>”\", and both are described by the same suggestion,\n * caption and error. Tab goes amount → unit → the suggestion's button.\n *\n * `className` is the field's box (a width, a grid cell); `inputClassName` and\n * `selectClassName` reach the two controls.\n */\nexport function QuantityField(props: QuantityFieldProps) {\n  return <QuantityFieldBody {...props} />;\n}\n\n/** @internal QuantityField, with the name its unit select is called by when the label is\n *  drawn outside it — RhfQuantityField's, above. Not on the barrel. */\nexport function QuantityFieldBody(props: QuantityFieldProps & { fieldName?: string }) {\n  const {\n    ref,\n    label,\n    hint,\n    help,\n    error,\n    required,\n    suggestion,\n    suggestionFrom,\n    fieldName,\n    className,\n    invalid,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  const labels = useKitLabels(\"quantity\", DEFAULT_QUANTITY_LABELS, rest.labels);\n  const locale = useKitLocale(rest.locale);\n  const name = label ?? rest[\"aria-label\"];\n\n  const offer = suggestion !== undefined && suggestion.amount !== null && Number.isFinite(suggestion.amount);\n  const suggestionId = useId();\n  // The suggestion first — it is about the value, nearest the control — then the caption\n  // and the error, the order every kit field reads its description in.\n  const messages = useFieldMessages({\n    hint,\n    help,\n    name,\n    error,\n    invalid,\n    describedBy: mergeDescribedBy(ariaDescribedBy, offer && suggestionId),\n    ariaInvalid,\n  });\n\n  const shown = offer ? formatQuantity(suggestion, locale, { labels }) : \"\";\n  const take = () => {\n    if (!offer || rest.disabled) return;\n    if (!same(suggestion, rest.value)) rest.onChange({ amount: suggestion.amount, unit: suggestion.unit });\n  };\n\n  // The data-* props tag the field's box, not the row inside it.\n  const rowProps = Object.fromEntries(Object.entries(rest).filter(([key]) => !key.startsWith(\"data-\"))) as typeof rest;\n\n  return (\n    <div {...dataAttributes(props)} className={className}>\n      <QuantityRow\n        {...rowProps}\n        ref={ref}\n        label={label}\n        labelHint={messages.labelHint}\n        fieldName={fieldName}\n        aria-describedby={messages.describedBy}\n        aria-required={required || ariaRequired || undefined}\n        invalid={messages.isInvalid}\n      />\n      {offer && (\n        <p id={suggestionId} data-slot=\"quantity-suggestion\" className={FIELD_CAPTION_CLASS}>\n          {hasContent(suggestionFrom) ? suggestionFrom : labels.suggested}\n          <span aria-hidden=\"true\"> · </span>\n          <button\n            type=\"button\"\n            onClick={take}\n            disabled={rest.disabled}\n            aria-label={labels.takeSuggestion(shown)}\n            // FieldSuggestion's text button: the caption's type, underlined as the kit's\n            // secondary TextLink is; the focus outline follows a wrapped line.\n            className={cn(\n              \"rounded-sm font-medium text-secondary underline underline-offset-2 transition-colors hover:text-primary\",\n              \"focus-visible:outline-focus focus-visible:outline-offset-2 focus-visible:outline-brand\",\n              \"disabled:cursor-default disabled:no-underline disabled:opacity-50\",\n            )}\n          >\n            {shown}\n          </button>\n        </p>\n      )}\n      {messages.below}\n    </div>\n  );\n}\n"],"mappings":";AAoES,cA+DD,YA/DC;AApET,SAAS,aAAa;AAEtB,SAAS,aAAa,+BAAwD;AAC9E,SAAS,qBAAqB,kBAAkB,wBAA6C;AAC7F,SAAS,cAAc,oBAAoB;AAC3C,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,sBAAqC;AAiC9C,SAAS,KAAK,GAAa,GAAsB;AAC/C,SAAO,EAAE,SAAS,EAAE,QAAQ,OAAO,GAAG,EAAE,QAAQ,EAAE,MAAM;AAC1D;AAwBO,SAAS,cAAc,OAA2B;AACvD,SAAO,oBAAC,qBAAmB,GAAG,OAAO;AACvC;AAIO,SAAS,kBAAkB,OAAoD;AACpF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,SAAS,aAAa,YAAY,yBAAyB,KAAK,MAAM;AAC5E,QAAM,SAAS,aAAa,KAAK,MAAM;AACvC,QAAM,OAAO,SAAS,KAAK,YAAY;AAEvC,QAAM,QAAQ,eAAe,UAAa,WAAW,WAAW,QAAQ,OAAO,SAAS,WAAW,MAAM;AACzG,QAAM,eAAe,MAAM;AAG3B,QAAM,WAAW,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,iBAAiB,iBAAiB,SAAS,YAAY;AAAA,IACpE;AAAA,EACF,CAAC;AAED,QAAM,QAAQ,QAAQ,eAAe,YAAY,QAAQ,EAAE,OAAO,CAAC,IAAI;AACvE,QAAM,OAAO,MAAM;AACjB,QAAI,CAAC,SAAS,KAAK,SAAU;AAC7B,QAAI,CAAC,KAAK,YAAY,KAAK,KAAK,EAAG,MAAK,SAAS,EAAE,QAAQ,WAAW,QAAQ,MAAM,WAAW,KAAK,CAAC;AAAA,EACvG;AAGA,QAAM,WAAW,OAAO,YAAY,OAAO,QAAQ,IAAI,EAAE,OAAO,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,WAAW,OAAO,CAAC,CAAC;AAEpG,SACE,qBAAC,SAAK,GAAG,eAAe,KAAK,GAAG,WAC9B;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA,WAAW,SAAS;AAAA,QACpB;AAAA,QACA,oBAAkB,SAAS;AAAA,QAC3B,iBAAe,YAAY,gBAAgB;AAAA,QAC3C,SAAS,SAAS;AAAA;AAAA,IACpB;AAAA,IACC,SACC,qBAAC,OAAE,IAAI,cAAc,aAAU,uBAAsB,WAAW,qBAC7D;AAAA,iBAAW,cAAc,IAAI,iBAAiB,OAAO;AAAA,MACtD,oBAAC,UAAK,eAAY,QAAO,oBAAG;AAAA,MAC5B;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,UAAU,KAAK;AAAA,UACf,cAAY,OAAO,eAAe,KAAK;AAAA,UAGvC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,OACF;AAAA,IAED,SAAS;AAAA,KACZ;AAEJ;","names":[]}

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

@@ -0,0 +1,139 @@
+import type { ReactNode, Ref } from "react";
+import { DEFAULT_QUANTITY_LABELS } from "./quantity-labels.js";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import { type DataAttributes } from "../lib/data-attributes.js";
+import { type Quantity, type QuantityFamily, type QuantityUnit } from "../lib/quantity.js";
+/** The words of {@link QuantityInput} and {@link QuantityField} — the `quantity` namespace. */
+export interface QuantityLabels {
+    /** The pieces unit, in the select and after a count: "pcs", "Stk.", "pce", "pz.". The
+     *  one unit with a word — g, kg, ml, cl, dl and l are SI symbols in every language. */
+    pcs: string;
+    /** The unit select's accessible name — with the field's name when it has one ("Unit
+     *  for “Flour”"), else alone. */
+    unit: (field?: string) => string;
+    /** The suggestion line's lead when the app names no source ({@link QuantityField}'s
+     *  `suggestionFrom`). */
+    suggested: string;
+    /** The suggestion button's accessible name: take this quantity ("Use 500 g"). It holds
+     *  the quantity the button shows, the words a voice user says (WCAG 2.5.3). */
+    takeSuggestion: (quantity: string) => string;
+}
+export { DEFAULT_QUANTITY_LABELS };
+/** {@link QuantityInput}'s props. */
+export interface QuantityInputProps extends DataAttributes {
+    /** The quantity: an amount (`null` for none yet) and its unit. */
+    value: Quantity;
+    /**
+     * The next quantity — when a typed amount commits (blur or Enter, as NumberField
+     * commits; never per keystroke) and when another unit is picked. The amount is
+     * already rounded to the unit's `digits` and clamped to `max`.
+     */
+    onChange: (next: Quantity) => void;
+    /** Offer only this family's units — `"mass"` (g, kg), `"volume"` (ml, cl, dl, l) or
+     *  `"count"` (pcs). Without it (and without `units`), every unit. */
+    family?: QuantityFamily;
+    /**
+     * The units to offer, explicitly — WINS over `family`, and is listed small to large
+     * whatever its order (`["ml", "dl", "l"]` is a volume list without centilitres). Each
+     * should lie inside `family` when both are given; one that does not is still offered,
+     * and a development build says so on the console. A value whose unit is not in the
+     * list (a 75 cl that `parseQuantity` read off a label) is still shown: the select lists
+     * its unit for as long as it is the value's.
+     */
+    units?: readonly QuantityUnit[];
+    /** An emptied amount commits `null`. Without it an empty amount is no answer and snaps
+     *  back to the last one, as NumberField's does. */
+    nullable?: boolean;
+    /** Refuse 0: it snaps back like text that is no number (default `true` — a shopping
+     *  list has no "0 g"). A negative amount is refused either way. */
+    positive?: boolean;
+    /** The largest amount, in whichever unit is chosen — NumberField's `max`: a typed amount
+     *  above it commits as `max`. A limit in a physical unit ("at most 25 kg") is the form's
+     *  validation, which sees the unit too. */
+    max?: number;
+    /**
+     * Decimals per unit, over {@link QUANTITY_DIGITS} (g 0, kg 3, ml 0, cl 1, dl 2, l 3,
+     * pcs 0): `{ kg: 2 }`, `{ pcs: 1 }`. A typed amount is rounded to them on commit, and
+     * shown with at most that many. Cut to the unit's milli grid (g and ml none, cl 1, dl 2,
+     * kg, l and pcs 3), so every amount still sums exactly.
+     */
+    digits?: Partial<Record<QuantityUnit, number>>;
+    /** BCP 47 tag for the amount's decimal mark ("1,5" in de-DE, "1.5" in de-CH); default
+     *  the `<UiKitProvider locale>`, else the runtime's — NumberField's `locale`. */
+    locale?: string;
+    /**
+     * Another unit converts the amount: `true` turns 500 g into 0.5 kg. `false` (default)
+     * keeps the amount as typed — 500 g becomes 500 kg — because the usual reason to change
+     * the unit is that the unit was wrong, not the weight. Either way the amount lands on
+     * the new unit's grid (1.5 kg kept as typed in grams is 2 g); a conversion within a
+     * family is exact, and across families (`units` mixing them) the amount is kept.
+     */
+    convertOnUnitChange?: boolean;
+    /** Both controls, the amount and the unit. */
+    disabled?: boolean;
+    /** Paints both controls as wrong — {@link Input}'s `invalid`. */
+    invalid?: boolean;
+    /** The amount `<input>`'s id — what a label's `htmlFor` points at. */
+    id?: string;
+    /** Names the amount when there is no label (a table cell). The unit select is named
+     *  after it: "Unit for “<aria-label>”". */
+    "aria-label"?: string;
+    /** Set on the amount input (and the unit select, which the same caption and error
+     *  describe) — a form library's control slot spreads these. */
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+    "aria-required"?: boolean | "true" | "false";
+    placeholder?: string;
+    /** Prop > `<UiKitProvider labels={{ quantity }}>` > English. */
+    labels?: LabelOverride<QuantityLabels>;
+    /** The root: the row holding the amount and the unit. */
+    className?: string;
+    /** The amount `<input>`. */
+    inputClassName?: string;
+    /** The unit `<select>`. */
+    selectClassName?: string;
+    /** The amount `<input>` — focus on error, `select()`. */
+    ref?: Ref<HTMLInputElement>;
+}
+/** @internal What {@link QuantityField} hands the row on top of the bare control's props. */
+export interface QuantityRowProps extends QuantityInputProps {
+    /** The floating label in the amount's box. */
+    label?: ReactNode;
+    /** What rides the label's line — a resolved `labelHint` (a FieldHint, a help "?"). */
+    labelHint?: ReactNode;
+    /** The field's name for the unit select's ("Unit for “Flour”") where the label is
+     *  drawn outside the row — RhfQuantityField's, above it. Default the label's text, else
+     *  `aria-label`. */
+    fieldName?: string;
+}
+/** @internal The unit a value with none starts in — the first one the select would offer
+ *  (RhfQuantityField's, for a form whose default is `null`). */
+export declare function firstOfferedUnit(units: readonly QuantityUnit[] | undefined, family: QuantityFamily | undefined): QuantityUnit;
+/** @internal The amount and unit row, with the floating label {@link QuantityField} gives
+ *  it. Not on the barrel: QuantityInput is this without a label. */
+export declare function QuantityRow(props: QuantityRowProps): import("react").JSX.Element;
+/**
+ * A quantity — an amount and its unit — as one control: the amount, typed in the
+ * locale's decimal mark, beside a select of units. The bare control, for a table row or
+ * a line of a list; {@link QuantityField} is the labelled field with a caption, an error
+ * and a suggestion to take.
+ *
+ * ```tsx
+ * <QuantityInput aria-label="Flour" family="mass" value={qty} onChange={setQty} />
+ * ```
+ *
+ * THE AMOUNT is NumberField's loop over {@link NumberInput}: a draft while it is typed
+ * (grouping read off, the locale's mark kept), resolved on blur or Enter — rounded to the
+ * unit's `digits`, clamped to `max` — and `onChange` only then. Empty, or text that is no
+ * number, snaps back (empty commits `null` with `nullable`); so does 0 under `positive`
+ * (the default), and a negative amount always.
+ *
+ * THE UNIT is a native select of {@link QUANTITY_UNITS} — `family`'s, or `units`' — with
+ * pieces in the reader's word (`quantity.pcs`). Picking one is a commit of its own;
+ * `convertOnUnitChange` decides whether the amount is converted or kept as typed.
+ *
+ * The value's arithmetic, formatting and parsing are `lib/quantity`'s — {@link toBaseQuantity},
+ * {@link convertQuantity}, {@link sumQuantities}, {@link formatQuantity}, {@link parseQuantity} —
+ * for the list's totals and a comparison table outside the field.
+ */
+export declare function QuantityInput(props: QuantityInputProps): import("react").JSX.Element;

package/dist/components/quantity-input.js

@@ -0,0 +1,188 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { NumberInput } from "./number-input.js";
+import { Select } from "./select.js";
+import { FIELD_FLOATING_PAD } from "./field-base.js";
+import { DEFAULT_QUANTITY_LABELS } from "./quantity-labels.js";
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { cn } from "../lib/cn.js";
+import { formatResult } from "../lib/calc.js";
+import { dataAttributes } from "../lib/data-attributes.js";
+import { decimalMark, localizeMark } from "../lib/decimal-marks.js";
+import { plainText } from "../lib/plain-text.js";
+import {
+  QUANTITY_DIGITS,
+  QUANTITY_UNITS,
+  convertQuantity,
+  quantityFamily,
+  quantityMaxDigits
+} from "../lib/quantity.js";
+import { roundHalfAway } from "../lib/round.js";
+function devWarnings() {
+  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;
+}
+function isUnit(unit) {
+  return typeof unit === "string" && QUANTITY_UNITS.includes(unit);
+}
+function digitsFor(unit, digits) {
+  const wanted = digits?.[unit] ?? QUANTITY_DIGITS[unit] ?? 3;
+  const whole = Number.isFinite(wanted) ? Math.trunc(wanted) : QUANTITY_DIGITS[unit];
+  return Math.min(Math.max(whole, 0), isUnit(unit) ? quantityMaxDigits(unit) : 3);
+}
+function onGrid(amount, unit, positive) {
+  const places = isUnit(unit) ? quantityMaxDigits(unit) : 3;
+  const rounded = roundHalfAway(amount, places);
+  return positive && rounded <= 0 && amount > 0 ? 10 ** -places : rounded;
+}
+function offeredUnits(units, family, current) {
+  const known = units?.filter(isUnit) ?? [];
+  const allowed = known.length > 0 ? known : QUANTITY_UNITS.filter((u) => !family || quantityFamily(u) === family);
+  return QUANTITY_UNITS.filter((u) => allowed.includes(u) || u === current);
+}
+function firstOfferedUnit(units, family) {
+  const known = units?.filter(isUnit) ?? [];
+  return QUANTITY_UNITS.find((u) => known.length > 0 ? known.includes(u) : !family || quantityFamily(u) === family);
+}
+function QuantityRow(props) {
+  const {
+    ref,
+    value,
+    onChange,
+    family,
+    units,
+    nullable = false,
+    positive = true,
+    max,
+    digits,
+    locale: localeProp,
+    convertOnUnitChange = false,
+    disabled,
+    invalid,
+    id,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    placeholder,
+    labels: labelsProp,
+    className,
+    inputClassName,
+    selectClassName,
+    label,
+    labelHint,
+    fieldName
+  } = props;
+  const labels = useKitLabels("quantity", DEFAULT_QUANTITY_LABELS, labelsProp);
+  const locale = useKitLocale(localeProp);
+  const mark = decimalMark(locale);
+  const amount = value.amount !== null && Number.isFinite(value.amount) ? value.amount : null;
+  const unit = value.unit;
+  const places = digitsFor(unit, digits);
+  const format = (n, decimals) => n === null ? "" : localizeMark(formatResult(roundHalfAway(n, decimals)), mark);
+  const [draft, setDraft] = useState(() => format(amount, places));
+  const [seen, setSeen] = useState({ amount, unit, mark, places });
+  if (!Object.is(seen.amount, amount) || seen.unit !== unit || seen.mark !== mark || seen.places !== places) {
+    setSeen({ amount, unit, mark, places });
+    setDraft(format(amount, places));
+  }
+  const commit = (text) => {
+    const trimmed = text.trim();
+    const snapBack = () => setDraft(format(amount, places));
+    let next;
+    if (trimmed === "") {
+      if (!nullable) return snapBack();
+      next = null;
+    } else {
+      const parsed = Number(trimmed.replace(/,/g, "."));
+      if (!Number.isFinite(parsed)) return snapBack();
+      next = roundHalfAway(parsed, places);
+      if (max !== void 0 && next > max) next = max;
+      if (next < 0 || positive && next === 0) return snapBack();
+    }
+    setDraft(format(next, places));
+    if (!Object.is(next, amount)) onChange({ amount: next, unit });
+  };
+  const pickUnit = (picked) => {
+    if (!isUnit(picked) || picked === unit) return;
+    let next = amount;
+    if (next !== null) {
+      if (convertOnUnitChange) next = convertQuantity({ amount: next, unit }, picked)?.amount ?? next;
+      next = onGrid(next, picked, positive);
+    }
+    onChange({ amount: next, unit: picked });
+  };
+  const offered = offeredUnits(units, family, unit);
+  const warned = useRef(false);
+  const unitsKey = units === void 0 ? void 0 : JSON.stringify(units);
+  useEffect(() => {
+    if (warned.current || !devWarnings() || unitsKey === void 0) return;
+    const list = JSON.parse(unitsKey);
+    const unknown = list.filter((u) => !isUnit(u));
+    const outside = family ? list.filter((u) => isUnit(u) && quantityFamily(u) !== family) : [];
+    if (unknown.length === 0 && outside.length === 0 && list.length > 0) return;
+    warned.current = true;
+    const problem = list.length === 0 ? "is empty, so the field offers its family's units" : unknown.length > 0 ? `names ${JSON.stringify(unknown)}, which no quantity is measured in` : `${JSON.stringify(outside)} ${outside.length === 1 ? "lies" : "lie"} outside family "${family}"`;
+    console.warn(
+      `[ui-kit] QuantityInput: \`units\` ${problem}. \`units\` wins over \`family\`: give units of the family, or leave \`family\` out. (Development builds only; once per field.)`
+    );
+  }, [unitsKey, family]);
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const name = fieldName ?? plainText(label) ?? ariaLabel;
+  const isInvalid = Boolean(invalid) || ariaInvalid === true || ariaInvalid === "true";
+  const labelled = label !== void 0;
+  return (
+    // `items-end`: at Large the amount's label stands above its box (§10.17), and the
+    // select lines up with the box, not with the label.
+    /* @__PURE__ */ jsxs("div", { ...dataAttributes(props), className: cn("flex items-end", className), children: [
+      /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          ref,
+          id: fieldId,
+          label,
+          ...labelHint !== void 0 ? { hint: labelHint } : {},
+          "aria-label": ariaLabel,
+          "aria-describedby": ariaDescribedBy,
+          "aria-required": ariaRequired,
+          value: draft,
+          onChange: (text) => setDraft(localizeMark(text, mark)),
+          onCommit: commit,
+          locale,
+          placeholder,
+          disabled,
+          invalid: isInvalid,
+          calculator: false,
+          className: "min-w-0 flex-1 focus-within:z-10",
+          inputClassName: cn("rounded-e-none", inputClassName)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          id: `${fieldId}-unit`,
+          "aria-label": labels.unit(name),
+          "aria-describedby": ariaDescribedBy,
+          value: unit,
+          onChange: (e) => pickUnit(e.target.value),
+          disabled,
+          invalid: isInvalid,
+          className: "-ms-px shrink-0 focus-within:z-10",
+          selectClassName: cn("w-auto rounded-s-none", labelled && FIELD_FLOATING_PAD, selectClassName),
+          children: offered.map((u) => /* @__PURE__ */ jsx("option", { value: u, children: u === "pcs" ? labels.pcs : u }, u))
+        }
+      )
+    ] })
+  );
+}
+function QuantityInput(props) {
+  return /* @__PURE__ */ jsx(QuantityRow, { ...props });
+}
+export {
+  DEFAULT_QUANTITY_LABELS,
+  QuantityInput,
+  QuantityRow,
+  firstOfferedUnit
+};
+//# sourceMappingURL=quantity-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/quantity-input.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactNode, Ref } from \"react\";\nimport { NumberInput } from \"./number-input\";\nimport { Select } from \"./select\";\nimport { FIELD_FLOATING_PAD } from \"./field-base\";\nimport { DEFAULT_QUANTITY_LABELS } from \"./quantity-labels\";\nimport { useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { formatResult } from \"../lib/calc\";\nimport { dataAttributes, type DataAttributes } from \"../lib/data-attributes\";\nimport { decimalMark, localizeMark } from \"../lib/decimal-marks\";\nimport { plainText } from \"../lib/plain-text\";\nimport {\n  QUANTITY_DIGITS,\n  QUANTITY_UNITS,\n  convertQuantity,\n  quantityFamily,\n  quantityMaxDigits,\n  type Quantity,\n  type QuantityFamily,\n  type QuantityUnit,\n} from \"../lib/quantity\";\nimport { roundHalfAway } from \"../lib/round\";\n\n/** The words of {@link QuantityInput} and {@link QuantityField} — the `quantity` namespace. */\nexport interface QuantityLabels {\n  /** The pieces unit, in the select and after a count: \"pcs\", \"Stk.\", \"pce\", \"pz.\". The\n   *  one unit with a word — g, kg, ml, cl, dl and l are SI symbols in every language. */\n  pcs: string;\n  /** The unit select's accessible name — with the field's name when it has one (\"Unit\n   *  for “Flour”\"), else alone. */\n  unit: (field?: string) => string;\n  /** The suggestion line's lead when the app names no source ({@link QuantityField}'s\n   *  `suggestionFrom`). */\n  suggested: string;\n  /** The suggestion button's accessible name: take this quantity (\"Use 500 g\"). It holds\n   *  the quantity the button shows, the words a voice user says (WCAG 2.5.3). */\n  takeSuggestion: (quantity: string) => string;\n}\n\n// Defined in ./quantity-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_QUANTITY_LABELS };\n\n/** {@link QuantityInput}'s props. */\nexport interface QuantityInputProps extends DataAttributes {\n  /** The quantity: an amount (`null` for none yet) and its unit. */\n  value: Quantity;\n  /**\n   * The next quantity — when a typed amount commits (blur or Enter, as NumberField\n   * commits; never per keystroke) and when another unit is picked. The amount is\n   * already rounded to the unit's `digits` and clamped to `max`.\n   */\n  onChange: (next: Quantity) => void;\n  /** Offer only this family's units — `\"mass\"` (g, kg), `\"volume\"` (ml, cl, dl, l) or\n   *  `\"count\"` (pcs). Without it (and without `units`), every unit. */\n  family?: QuantityFamily;\n  /**\n   * The units to offer, explicitly — WINS over `family`, and is listed small to large\n   * whatever its order (`[\"ml\", \"dl\", \"l\"]` is a volume list without centilitres). Each\n   * should lie inside `family` when both are given; one that does not is still offered,\n   * and a development build says so on the console. A value whose unit is not in the\n   * list (a 75 cl that `parseQuantity` read off a label) is still shown: the select lists\n   * its unit for as long as it is the value's.\n   */\n  units?: readonly QuantityUnit[];\n  /** An emptied amount commits `null`. Without it an empty amount is no answer and snaps\n   *  back to the last one, as NumberField's does. */\n  nullable?: boolean;\n  /** Refuse 0: it snaps back like text that is no number (default `true` — a shopping\n   *  list has no \"0 g\"). A negative amount is refused either way. */\n  positive?: boolean;\n  /** The largest amount, in whichever unit is chosen — NumberField's `max`: a typed amount\n   *  above it commits as `max`. A limit in a physical unit (\"at most 25 kg\") is the form's\n   *  validation, which sees the unit too. */\n  max?: number;\n  /**\n   * Decimals per unit, over {@link QUANTITY_DIGITS} (g 0, kg 3, ml 0, cl 1, dl 2, l 3,\n   * pcs 0): `{ kg: 2 }`, `{ pcs: 1 }`. A typed amount is rounded to them on commit, and\n   * shown with at most that many. Cut to the unit's milli grid (g and ml none, cl 1, dl 2,\n   * kg, l and pcs 3), so every amount still sums exactly.\n   */\n  digits?: Partial<Record<QuantityUnit, number>>;\n  /** BCP 47 tag for the amount's decimal mark (\"1,5\" in de-DE, \"1.5\" in de-CH); default\n   *  the `<UiKitProvider locale>`, else the runtime's — NumberField's `locale`. */\n  locale?: string;\n  /**\n   * Another unit converts the amount: `true` turns 500 g into 0.5 kg. `false` (default)\n   * keeps the amount as typed — 500 g becomes 500 kg — because the usual reason to change\n   * the unit is that the unit was wrong, not the weight. Either way the amount lands on\n   * the new unit's grid (1.5 kg kept as typed in grams is 2 g); a conversion within a\n   * family is exact, and across families (`units` mixing them) the amount is kept.\n   */\n  convertOnUnitChange?: boolean;\n  /** Both controls, the amount and the unit. */\n  disabled?: boolean;\n  /** Paints both controls as wrong — {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** The amount `<input>`'s id — what a label's `htmlFor` points at. */\n  id?: string;\n  /** Names the amount when there is no label (a table cell). The unit select is named\n   *  after it: \"Unit for “<aria-label>”\". */\n  \"aria-label\"?: string;\n  /** Set on the amount input (and the unit select, which the same caption and error\n   *  describe) — a form library's control slot spreads these. */\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n  placeholder?: string;\n  /** Prop > `<UiKitProvider labels={{ quantity }}>` > English. */\n  labels?: LabelOverride<QuantityLabels>;\n  /** The root: the row holding the amount and the unit. */\n  className?: string;\n  /** The amount `<input>`. */\n  inputClassName?: string;\n  /** The unit `<select>`. */\n  selectClassName?: string;\n  /** The amount `<input>` — focus on error, `select()`. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/** @internal What {@link QuantityField} hands the row on top of the bare control's props. */\nexport interface QuantityRowProps extends QuantityInputProps {\n  /** The floating label in the amount's box. */\n  label?: ReactNode;\n  /** What rides the label's line — a resolved `labelHint` (a FieldHint, a help \"?\"). */\n  labelHint?: ReactNode;\n  /** The field's name for the unit select's (\"Unit for “Flour”\") where the label is\n   *  drawn outside the row — RhfQuantityField's, above it. Default the label's text, else\n   *  `aria-label`. */\n  fieldName?: string;\n}\n\n/** The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a\n *  production one, and never under vitest. Read per call so a test can switch it on with\n *  `vi.stubEnv`. Optional-chained: `import.meta.env` is a Vite injection. */\nfunction devWarnings(): boolean {\n  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;\n}\n\n/** A unit the kit knows — a `units` entry may be a typo, or a string off an API. */\nfunction isUnit(unit: unknown): unit is QuantityUnit {\n  return typeof unit === \"string\" && (QUANTITY_UNITS as readonly string[]).includes(unit);\n}\n\n/** The decimals `unit` is entered with: the caller's, else the default, cut to the grid. */\nfunction digitsFor(unit: QuantityUnit, digits: QuantityInputProps[\"digits\"]): number {\n  const wanted = digits?.[unit] ?? QUANTITY_DIGITS[unit] ?? 3;\n  const whole = Number.isFinite(wanted) ? Math.trunc(wanted) : QUANTITY_DIGITS[unit];\n  return Math.min(Math.max(whole, 0), isUnit(unit) ? quantityMaxDigits(unit) : 3);\n}\n\n/**\n * `amount` on `unit`'s milli grid, for a unit switch: half away from zero, except that a\n * positive amount never rounds to 0 under `positive` — 0.4 kg kept as typed in grams is\n * 1 g, the smallest amount the field would accept, not a 0 it would refuse.\n */\nfunction onGrid(amount: number, unit: QuantityUnit, positive: boolean): number {\n  const places = isUnit(unit) ? quantityMaxDigits(unit) : 3;\n  const rounded = roundHalfAway(amount, places);\n  return positive && rounded <= 0 && amount > 0 ? 10 ** -places : rounded;\n}\n\n/** The units the select offers: `units` (known ones, deduplicated), else `family`'s,\n *  else all — plus the value's own unit while it is outside them. Small to large. */\nfunction offeredUnits(\n  units: readonly QuantityUnit[] | undefined,\n  family: QuantityFamily | undefined,\n  current: QuantityUnit,\n): QuantityUnit[] {\n  const known = units?.filter(isUnit) ?? [];\n  const allowed = known.length > 0 ? known : QUANTITY_UNITS.filter((u) => !family || quantityFamily(u) === family);\n  return QUANTITY_UNITS.filter((u) => allowed.includes(u) || u === current);\n}\n\n/** @internal The unit a value with none starts in — the first one the select would offer\n *  (RhfQuantityField's, for a form whose default is `null`). */\nexport function firstOfferedUnit(units: readonly QuantityUnit[] | undefined, family: QuantityFamily | undefined) {\n  const known = units?.filter(isUnit) ?? [];\n  return QUANTITY_UNITS.find((u) => (known.length > 0 ? known.includes(u) : !family || quantityFamily(u) === family))!;\n}\n\n/** @internal The amount and unit row, with the floating label {@link QuantityField} gives\n *  it. Not on the barrel: QuantityInput is this without a label. */\nexport function QuantityRow(props: QuantityRowProps) {\n  const {\n    ref,\n    value,\n    onChange,\n    family,\n    units,\n    nullable = false,\n    positive = true,\n    max,\n    digits,\n    locale: localeProp,\n    convertOnUnitChange = false,\n    disabled,\n    invalid,\n    id,\n    \"aria-label\": ariaLabel,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    placeholder,\n    labels: labelsProp,\n    className,\n    inputClassName,\n    selectClassName,\n    label,\n    labelHint,\n    fieldName,\n  } = props;\n  const labels = useKitLabels(\"quantity\", DEFAULT_QUANTITY_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  const mark = decimalMark(locale);\n  // A number that is not finite is no amount, as NumberField reads its value (INP-11).\n  const amount = value.amount !== null && Number.isFinite(value.amount) ? value.amount : null;\n  const unit = value.unit;\n  const places = digitsFor(unit, digits);\n  // `formatResult` for fixed notation (\"1e-7\" would read back as 17), in the locale's mark.\n  const format = (n: number | null, decimals: number) =>\n    n === null ? \"\" : localizeMark(formatResult(roundHalfAway(n, decimals)), mark);\n\n  // The draft the amount shows while it is typed — NumberField's loop: kept as typed,\n  // resolved on commit, re-rendered from the value when that changes from outside (a\n  // reset, a unit switch, a suggestion taken) or when the mark or the digits do.\n  const [draft, setDraft] = useState(() => format(amount, places));\n  const [seen, setSeen] = useState({ amount, unit, mark, places });\n  if (!Object.is(seen.amount, amount) || seen.unit !== unit || seen.mark !== mark || seen.places !== places) {\n    setSeen({ amount, unit, mark, places });\n    setDraft(format(amount, places));\n  }\n\n  const commit = (text: string) => {\n    const trimmed = text.trim();\n    // Unparsable, refused or emptied without `nullable`: back to the value, as NumberField\n    // snaps back — never a NaN, a 0 or a negative sent on for the server to reject.\n    const snapBack = () => setDraft(format(amount, places));\n    let next: number | null;\n    if (trimmed === \"\") {\n      if (!nullable) return snapBack();\n      next = null;\n    } else {\n      // NumberInput's committed text: an evaluated calculation, dot-decimal.\n      const parsed = Number(trimmed.replace(/,/g, \".\"));\n      if (!Number.isFinite(parsed)) return snapBack();\n      next = roundHalfAway(parsed, places);\n      if (max !== undefined && next > max) next = max;\n      if (next < 0 || (positive && next === 0)) return snapBack();\n    }\n    setDraft(format(next, places));\n    if (!Object.is(next, amount)) onChange({ amount: next, unit });\n  };\n\n  const pickUnit = (picked: string) => {\n    if (!isUnit(picked) || picked === unit) return;\n    let next = amount;\n    if (next !== null) {\n      if (convertOnUnitChange) next = convertQuantity({ amount: next, unit }, picked)?.amount ?? next;\n      next = onGrid(next, picked, positive);\n    }\n    onChange({ amount: next, unit: picked });\n  };\n\n  const offered = offeredUnits(units, family, unit);\n  // The units warning, once per field, development only. Keyed on the list's text: a\n  // caller's inline `units={[\"ml\", \"dl\", \"l\"]}` is a new array on every render.\n  const warned = useRef(false);\n  const unitsKey = units === undefined ? undefined : JSON.stringify(units);\n  useEffect(() => {\n    if (warned.current || !devWarnings() || unitsKey === undefined) return;\n    const list = JSON.parse(unitsKey) as unknown[];\n    const unknown = list.filter((u) => !isUnit(u));\n    const outside = family ? list.filter((u) => isUnit(u) && quantityFamily(u) !== family) : [];\n    if (unknown.length === 0 && outside.length === 0 && list.length > 0) return;\n    warned.current = true;\n    const problem =\n      list.length === 0\n        ? \"is empty, so the field offers its family's units\"\n        : unknown.length > 0\n          ? `names ${JSON.stringify(unknown)}, which no quantity is measured in`\n          : `${JSON.stringify(outside)} ${outside.length === 1 ? \"lies\" : \"lie\"} outside family \"${family}\"`;\n    console.warn(\n      `[ui-kit] QuantityInput: \\`units\\` ${problem}. \\`units\\` wins over \\`family\\`: give units of the family, ` +\n        `or leave \\`family\\` out. (Development builds only; once per field.)`,\n    );\n  }, [unitsKey, family]);\n\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  const name = fieldName ?? plainText(label) ?? ariaLabel;\n  const isInvalid = Boolean(invalid) || ariaInvalid === true || ariaInvalid === \"true\";\n  const labelled = label !== undefined;\n\n  return (\n    // `items-end`: at Large the amount's label stands above its box (§10.17), and the\n    // select lines up with the box, not with the label.\n    <div {...dataAttributes(props)} className={cn(\"flex items-end\", className)}>\n      <NumberInput\n        ref={ref}\n        id={fieldId}\n        label={label}\n        // Only when there is one: NumberInput keeps a wrapper box for a passed `hint` key,\n        // and the box would take the flex item's place in this row.\n        {...(labelHint !== undefined ? { hint: labelHint } : {})}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        aria-required={ariaRequired}\n        value={draft}\n        onChange={(text) => setDraft(localizeMark(text, mark))}\n        onCommit={commit}\n        locale={locale}\n        placeholder={placeholder}\n        disabled={disabled}\n        invalid={isInvalid}\n        // A count or a weight is typed, not worked out; the trigger beside a unit select\n        // in a table cell is noise. A typed \"2*500\" still evaluates on commit.\n        calculator={false}\n        // The focused half paints its whole frame over the shared border.\n        className=\"min-w-0 flex-1 focus-within:z-10\"\n        inputClassName={cn(\"rounded-e-none\", inputClassName)}\n      />\n      <Select\n        id={`${fieldId}-unit`}\n        aria-label={labels.unit(name)}\n        aria-describedby={ariaDescribedBy}\n        value={unit}\n        onChange={(e) => pickUnit(e.target.value)}\n        disabled={disabled}\n        invalid={isInvalid}\n        // One border between the two halves, not two side by side.\n        className=\"-ms-px shrink-0 focus-within:z-10\"\n        // As tall as the floating field beside it, its value on the same line.\n        selectClassName={cn(\"w-auto rounded-s-none\", labelled && FIELD_FLOATING_PAD, selectClassName)}\n      >\n        {offered.map((u) => (\n          <option key={u} value={u}>\n            {u === \"pcs\" ? labels.pcs : u}\n          </option>\n        ))}\n      </Select>\n    </div>\n  );\n}\n\n/**\n * A quantity — an amount and its unit — as one control: the amount, typed in the\n * locale's decimal mark, beside a select of units. The bare control, for a table row or\n * a line of a list; {@link QuantityField} is the labelled field with a caption, an error\n * and a suggestion to take.\n *\n * ```tsx\n * <QuantityInput aria-label=\"Flour\" family=\"mass\" value={qty} onChange={setQty} />\n * ```\n *\n * THE AMOUNT is NumberField's loop over {@link NumberInput}: a draft while it is typed\n * (grouping read off, the locale's mark kept), resolved on blur or Enter — rounded to the\n * unit's `digits`, clamped to `max` — and `onChange` only then. Empty, or text that is no\n * number, snaps back (empty commits `null` with `nullable`); so does 0 under `positive`\n * (the default), and a negative amount always.\n *\n * THE UNIT is a native select of {@link QUANTITY_UNITS} — `family`'s, or `units`' — with\n * pieces in the reader's word (`quantity.pcs`). Picking one is a commit of its own;\n * `convertOnUnitChange` decides whether the amount is converted or kept as typed.\n *\n * The value's arithmetic, formatting and parsing are `lib/quantity`'s — {@link toBaseQuantity},\n * {@link convertQuantity}, {@link sumQuantities}, {@link formatQuantity}, {@link parseQuantity} —\n * for the list's totals and a comparison table outside the field.\n */\nexport function QuantityInput(props: QuantityInputProps) {\n  return <QuantityRow {...props} />;\n}\n"],"mappings":"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","names":[]}

package/dist/components/quantity-labels.d.ts

@@ -0,0 +1,2 @@
+import type { QuantityLabels } from "./quantity-input.js";
+export declare const DEFAULT_QUANTITY_LABELS: QuantityLabels;

package/dist/components/quantity-labels.js

@@ -0,0 +1,11 @@
+"use client";
+const DEFAULT_QUANTITY_LABELS = {
+  pcs: "pcs",
+  unit: (field) => field ? `Unit for \u201C${field}\u201D` : "Unit",
+  suggested: "Suggested",
+  takeSuggestion: (quantity) => `Use ${quantity}`
+};
+export {
+  DEFAULT_QUANTITY_LABELS
+};
+//# sourceMappingURL=quantity-labels.js.map

package/dist/components/quantity-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/quantity-labels.ts"],"sourcesContent":["// The English words of ./quantity-input's QuantityInput and QuantityField, in a module with\n// no component code: the English catalogue (src/i18n/defaults.ts) imports them without the\n// component, so `en` loads as one chunk like the other languages (0.34, KS U8).\n// ./quantity-input re-exports them.\n\nimport type { QuantityLabels } from \"./quantity-input\";\n\nexport const DEFAULT_QUANTITY_LABELS: QuantityLabels = {\n  pcs: \"pcs\",\n  unit: (field) => (field ? `Unit for “${field}”` : \"Unit\"),\n  suggested: \"Suggested\",\n  takeSuggestion: (quantity) => `Use ${quantity}`,\n};\n"],"mappings":";AAOO,MAAM,0BAA0C;AAAA,EACrD,KAAK;AAAA,EACL,MAAM,CAAC,UAAW,QAAQ,kBAAa,KAAK,WAAM;AAAA,EAClD,WAAW;AAAA,EACX,gBAAgB,CAAC,aAAa,OAAO,QAAQ;AAC/C;","names":[]}

package/dist/eslint/index.js

@@ -47,7 +47,7 @@ const roleUtilities = {
     };
   }
 };
-const VERSION = true ? "0.56.0" : "0.0.0-source";
+const VERSION = true ? "0.57.0" : "0.0.0-source";
 const recommended = {
   name: "@eifi1/ui-kit/recommended",
   // Not the tests, as check:tokens skips the kit's: a test names the old class to assert it