@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/nav-pills.js

@@ -2,12 +2,13 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 import { useKitLink } from "../i18n/kit-labels.js";
+import { FOCUS_RING } from "./focus-ring.js";
 import { pickLinkRenderer, RenderedKitLink } from "./text-link.js";
-const PILL = "inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-[var(--border-strong)] [&_svg]:size-4 [&_svg]:shrink-0";
+const PILL = `inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none ${FOCUS_RING} [&_svg]:size-4 [&_svg]:shrink-0`;
 const PILL_SM = "gap-1 px-2 py-1 text-xs [&_svg]:size-3.5";
-const PILL_CURRENT = "bg-[var(--bg-inverse)] text-[var(--text-inverse)]";
-const PILL_IDLE = "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]";
-const PILL_DISABLED = "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--text-secondary)]";
+const PILL_CURRENT = "bg-inverse text-inverse";
+const PILL_IDLE = "text-secondary hover:bg-hover hover:text-primary";
+const PILL_DISABLED = "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-secondary";
 function NavPills({
   items,
   current,
@@ -18,50 +19,60 @@ function NavPills({
   landmark = true,
   itemClassName,
   className,
+  ref,
   ...rest
 }) {
   const kitLink = useKitLink();
   const Root = landmark ? "nav" : "div";
-  return /* @__PURE__ */ jsx(Root, { ...rest, role: landmark ? void 0 : "group", className: cn("min-w-0", className), children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-wrap gap-1 p-0", children: items.map((item) => {
-    const isCurrent = item.value === current;
-    const Icon = item.icon;
-    const pillClass = cn(
-      PILL,
-      size === "sm" && PILL_SM,
-      isCurrent ? PILL_CURRENT : PILL_IDLE,
-      item.disabled && item.href === void 0 && PILL_DISABLED,
-      itemClassName
-    );
-    const children = /* @__PURE__ */ jsxs(Fragment, { children: [
-      Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true }),
-      item.label
-    ] });
-    let pill;
-    if (item.href !== void 0) {
-      const props = {
-        href: item.href,
-        className: pillClass,
-        children,
-        "aria-current": isCurrent ? currentType ?? "page" : void 0,
-        onClick: () => onSelect?.(item.value)
-      };
-      const kit = pickLinkRenderer(void 0, kitLink, item.href);
-      pill = renderLink ? renderLink(props) : kit ? /* @__PURE__ */ jsx(RenderedKitLink, { render: kit, props }) : /* @__PURE__ */ jsx("a", { href: props.href, className: props.className, "aria-current": props["aria-current"], onClick: props.onClick, children: props.children });
-    } else {
-      pill = /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          disabled: item.disabled,
-          "aria-current": isCurrent ? currentType ?? "true" : void 0,
-          onClick: () => onSelect?.(item.value),
-          className: pillClass,
-          children
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      ...rest,
+      ref,
+      role: landmark ? void 0 : "group",
+      className: cn("min-w-0", className),
+      children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-wrap gap-1 p-0", children: items.map((item) => {
+        const isCurrent = item.value === current;
+        const Icon = item.icon;
+        const pillClass = cn(
+          PILL,
+          size === "sm" && PILL_SM,
+          isCurrent ? PILL_CURRENT : PILL_IDLE,
+          item.disabled && item.href === void 0 && PILL_DISABLED,
+          itemClassName
+        );
+        const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+          Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true }),
+          item.label
+        ] });
+        let pill;
+        if (item.href !== void 0) {
+          const props = {
+            href: item.href,
+            className: pillClass,
+            children,
+            "aria-current": isCurrent ? currentType ?? "page" : void 0,
+            onClick: () => onSelect?.(item.value)
+          };
+          const kit = pickLinkRenderer(void 0, kitLink, item.href);
+          pill = renderLink ? renderLink(props) : kit ? /* @__PURE__ */ jsx(RenderedKitLink, { render: kit, props }) : /* @__PURE__ */ jsx("a", { href: props.href, className: props.className, "aria-current": props["aria-current"], onClick: props.onClick, children: props.children });
+        } else {
+          pill = /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: item.disabled,
+              "aria-current": isCurrent ? currentType ?? "true" : void 0,
+              onClick: () => onSelect?.(item.value),
+              className: pillClass,
+              children
+            }
+          );
         }
-      );
+        return /* @__PURE__ */ jsx("li", { className: "flex", children: pill }, item.value);
+      }) })
     }
-    return /* @__PURE__ */ jsx("li", { className: "flex", children: pill }, item.value);
-  }) }) });
+  );
 }
 export {
   NavPills

package/dist/components/nav-pills.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/nav-pills.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ComponentType, MouseEvent, ReactElement, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\n\nexport interface NavPillItem<T extends string> {\n  value: T;\n  label: ReactNode;\n  /** Where the pill leads. With one it is a link (see `renderLink`); without, a button\n   *  that calls `onSelect`. */\n  href?: string;\n  /** A Lucide icon (or any component taking a `className`), before the label. */\n  icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** Buttons only — a link cannot be disabled. */\n  disabled?: boolean;\n}\n\n/** What {@link NavPillsProps.renderLink} is handed. Spread it onto your router's link\n *  — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface NavPillLinkProps {\n  href: string;\n  className: string;\n  children: ReactNode;\n  \"aria-current\": NavPillsCurrent | undefined;\n  onClick: (e: MouseEvent<HTMLAnchorElement>) => void;\n}\n\n/** The `aria-current` token the current pill carries. */\nexport type NavPillsCurrent = \"page\" | \"step\" | \"location\" | \"true\";\n\nexport interface NavPillsProps<T extends string> extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\" | \"onSelect\"> {\n  items: NavPillItem<T>[];\n  /** The pill that is current. `null` or a value not in `items`: none is. */\n  current: T | null;\n  /** Called with the pill's value on a click — of a button, and of a link too (before\n   *  the router follows it), for a caller that keeps the choice in state as well. */\n  onSelect?: (value: T) => void;\n  /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app\n   *  `href`), then `<a>`. The API `Breadcrumbs`, `Chip` and `ListItem` share. */\n  renderLink?: (props: NavPillLinkProps) => ReactElement;\n  /** What `aria-current` says on the current pill. Default `page` where the items\n   *  are links and `true` where they are buttons (keksdose's swipe-surface picker\n   *  switches a panel on the same page, which is not a page). */\n  currentType?: NavPillsCurrent;\n  /** `sm`: 12px pills — the compact size of a {@link ToggleGroup}. Default `md`. */\n  size?: \"sm\" | \"md\";\n  /** Render a `<nav>` landmark (default) or a plain `<div role=\"group\">` for a picker\n   *  that is not the page's navigation. Name either with `aria-label`. */\n  landmark?: boolean;\n  /** Classes for every pill. */\n  itemClassName?: string;\n}\n\n// The pill is a ToggleGroup segment's (`rounded`, `px-3 py-1.5`, the inverse fill for\n// the current one), so a strip of these beside a segmented control reads as the same\n// family. Unlike the segments, a pill never truncates: the strip WRAPS instead.\nconst PILL =\n  \"inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-[var(--border-strong)] [&_svg]:size-4 [&_svg]:shrink-0\";\nconst PILL_SM = \"gap-1 px-2 py-1 text-xs [&_svg]:size-3.5\";\nconst PILL_CURRENT = \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\";\nconst PILL_IDLE = \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]\";\nconst PILL_DISABLED = \"cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--text-secondary)]\";\n\n/**\n * A set of links or buttons that WRAPS onto as many rows as it needs, the current one\n * filled and marked `aria-current`.\n *\n * keksdose's swipe-settings card (swipe-settings-card:152) hand-rolled this: four\n * surface names that do not fit a 406px phone, and a sideways scroll would hide the\n * ones that do not fit behind a gesture nothing announces (live #332: *\"Have the tabs\n * in more rows, rather than scrolling sideways\"*). It is not {@link Tabs} with `wrap`\n * because its items are not tabs: a `role=\"tab\"` promises a tabpanel, a roving tab\n * stop and arrow keys, and a set of links to pages (or of buttons that switch the rest\n * of a card) promises none of that. So every pill is its own tab stop, the set is a\n * list (a screen reader hears \"list, 4 items\"), and \"current\" is `aria-current` — the\n * attribute a link to where you already are carries.\n */\nexport function NavPills<T extends string>({\n  items,\n  current,\n  onSelect,\n  renderLink,\n  currentType,\n  size = \"md\",\n  landmark = true,\n  itemClassName,\n  className,\n  ...rest\n}: NavPillsProps<T>) {\n  const kitLink = useKitLink();\n  const Root = landmark ? \"nav\" : \"div\";\n  return (\n    <Root {...rest} role={landmark ? undefined : \"group\"} className={cn(\"min-w-0\", className)}>\n      <ul className=\"m-0 flex list-none flex-wrap gap-1 p-0\">\n        {items.map((item) => {\n          const isCurrent = item.value === current;\n          const Icon = item.icon;\n          const pillClass = cn(\n            PILL,\n            size === \"sm\" && PILL_SM,\n            isCurrent ? PILL_CURRENT : PILL_IDLE,\n            item.disabled && item.href === undefined && PILL_DISABLED,\n            itemClassName,\n          );\n          const children = (\n            <>\n              {Icon && <Icon aria-hidden />}\n              {item.label}\n            </>\n          );\n          let pill: ReactNode;\n          if (item.href !== undefined) {\n            const props: NavPillLinkProps = {\n              href: item.href,\n              className: pillClass,\n              children,\n              \"aria-current\": isCurrent ? (currentType ?? \"page\") : undefined,\n              onClick: () => onSelect?.(item.value),\n            };\n            const kit = pickLinkRenderer<NavPillLinkProps>(undefined, kitLink, item.href);\n            pill = renderLink ? (\n              renderLink(props)\n            ) : kit ? (\n              <RenderedKitLink render={kit} props={props} />\n            ) : (\n              <a href={props.href} className={props.className} aria-current={props[\"aria-current\"]} onClick={props.onClick}>\n                {props.children}\n              </a>\n            );\n          } else {\n            pill = (\n              <button\n                type=\"button\"\n                disabled={item.disabled}\n                aria-current={isCurrent ? (currentType ?? \"true\") : undefined}\n                onClick={() => onSelect?.(item.value)}\n                className={pillClass}\n              >\n                {children}\n              </button>\n            );\n          }\n          return (\n            <li key={item.value} className=\"flex\">\n              {pill}\n            </li>\n          );\n        })}\n      </ul>\n    </Root>\n  );\n}\n"],"mappings":";AAyGY,mBACW,KADX;AAxGZ,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB,uBAAuB;AAqDlD,MAAM,OACJ;AACF,MAAM,UAAU;AAChB,MAAM,eAAe;AACrB,MAAM,YAAY;AAClB,MAAM,gBAAgB;AAgBf,SAAS,SAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,UAAU,WAAW;AAC3B,QAAM,OAAO,WAAW,QAAQ;AAChC,SACE,oBAAC,QAAM,GAAG,MAAM,MAAM,WAAW,SAAY,SAAS,WAAW,GAAG,WAAW,SAAS,GACtF,8BAAC,QAAG,WAAU,0CACX,gBAAM,IAAI,CAAC,SAAS;AACnB,UAAM,YAAY,KAAK,UAAU;AACjC,UAAM,OAAO,KAAK;AAClB,UAAM,YAAY;AAAA,MAChB;AAAA,MACA,SAAS,QAAQ;AAAA,MACjB,YAAY,eAAe;AAAA,MAC3B,KAAK,YAAY,KAAK,SAAS,UAAa;AAAA,MAC5C;AAAA,IACF;AACA,UAAM,WACJ,iCACG;AAAA,cAAQ,oBAAC,QAAK,eAAW,MAAC;AAAA,MAC1B,KAAK;AAAA,OACR;AAEF,QAAI;AACJ,QAAI,KAAK,SAAS,QAAW;AAC3B,YAAM,QAA0B;AAAA,QAC9B,MAAM,KAAK;AAAA,QACX,WAAW;AAAA,QACX;AAAA,QACA,gBAAgB,YAAa,eAAe,SAAU;AAAA,QACtD,SAAS,MAAM,WAAW,KAAK,KAAK;AAAA,MACtC;AACA,YAAM,MAAM,iBAAmC,QAAW,SAAS,KAAK,IAAI;AAC5E,aAAO,aACL,WAAW,KAAK,IACd,MACF,oBAAC,mBAAgB,QAAQ,KAAK,OAAc,IAE5C,oBAAC,OAAE,MAAM,MAAM,MAAM,WAAW,MAAM,WAAW,gBAAc,MAAM,cAAc,GAAG,SAAS,MAAM,SAClG,gBAAM,UACT;AAAA,IAEJ,OAAO;AACL,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU,KAAK;AAAA,UACf,gBAAc,YAAa,eAAe,SAAU;AAAA,UACpD,SAAS,MAAM,WAAW,KAAK,KAAK;AAAA,UACpC,WAAW;AAAA,UAEV;AAAA;AAAA,MACH;AAAA,IAEJ;AACA,WACE,oBAAC,QAAoB,WAAU,QAC5B,kBADM,KAAK,KAEd;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/nav-pills.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ComponentType, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\n\nexport interface NavPillItem<T extends string> {\n  value: T;\n  label: ReactNode;\n  /** Where the pill leads. With one it is a link (see `renderLink`); without, a button\n   *  that calls `onSelect`. */\n  href?: string;\n  /** A Lucide icon (or any component taking a `className`), before the label. */\n  icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** Buttons only — a link cannot be disabled. */\n  disabled?: boolean;\n}\n\n/** What {@link NavPillsProps.renderLink} is handed. Spread it onto your router's link\n *  — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface NavPillLinkProps {\n  href: string;\n  className: string;\n  children: ReactNode;\n  \"aria-current\": NavPillsCurrent | undefined;\n  onClick: (e: MouseEvent<HTMLAnchorElement>) => void;\n}\n\n/** The `aria-current` token the current pill carries. */\nexport type NavPillsCurrent = \"page\" | \"step\" | \"location\" | \"true\";\n\nexport interface NavPillsProps<T extends string> extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\" | \"onSelect\"> {\n  items: NavPillItem<T>[];\n  /** The pill that is current. `null` or a value not in `items`: none is. */\n  current: T | null;\n  /** Called with the pill's value on a click — of a button, and of a link too (before\n   *  the router follows it), for a caller that keeps the choice in state as well. */\n  onSelect?: (value: T) => void;\n  /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app\n   *  `href`), then `<a>`. The API `Breadcrumbs`, `Chip` and `ListItem` share. */\n  renderLink?: (props: NavPillLinkProps) => ReactElement;\n  /** What `aria-current` says on the current pill. Default `page` where the items\n   *  are links and `true` where they are buttons (keksdose's swipe-surface picker\n   *  switches a panel on the same page, which is not a page). */\n  currentType?: NavPillsCurrent;\n  /** `sm`: 12px pills — the compact size of a {@link ToggleGroup}. Default `md`. */\n  size?: \"sm\" | \"md\";\n  /** Render a `<nav>` landmark (default) or a plain `<div role=\"group\">` for a picker\n   *  that is not the page's navigation. Name either with `aria-label`. */\n  landmark?: boolean;\n  /** Classes for every pill. */\n  itemClassName?: string;\n  /** The `<nav>` (or the `<div role=\"group\">`) — hence `HTMLElement` (0.34, API-2,\n   *  refactor audit 2026-10). */\n  ref?: Ref<HTMLElement>;\n}\n\n// The pill is a ToggleGroup segment's (`rounded`, `px-3 py-1.5`, the inverse fill for\n// the current one), so a strip of these beside a segmented control reads as the same\n// family. Unlike the segments, a pill never truncates: the strip WRAPS instead. Its focus\n// ring is the kit's one focus frame (text-size §5), in brand; until 0.34 it copied the\n// segment's `ring-strong` too (refactor audit 2026-10, DOC-7).\nconst PILL = `inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none ${FOCUS_RING} [&_svg]:size-4 [&_svg]:shrink-0`;\nconst PILL_SM = \"gap-1 px-2 py-1 text-xs [&_svg]:size-3.5\";\nconst PILL_CURRENT = \"bg-inverse text-inverse\";\nconst PILL_IDLE = \"text-secondary hover:bg-hover hover:text-primary\";\nconst PILL_DISABLED = \"cursor-not-allowed opacity-50 hover:bg-transparent hover:text-secondary\";\n\n/**\n * A set of links or buttons that WRAPS onto as many rows as it needs, the current one\n * filled and marked `aria-current`.\n *\n * keksdose's swipe-settings card (swipe-settings-card:152) hand-rolled this: four\n * surface names that do not fit a 406px phone, and a sideways scroll would hide the\n * ones that do not fit behind a gesture nothing announces (live #332: *\"Have the tabs\n * in more rows, rather than scrolling sideways\"*). It is not {@link Tabs} with `wrap`\n * because its items are not tabs: a `role=\"tab\"` promises a tabpanel, a roving tab\n * stop and arrow keys, and a set of links to pages (or of buttons that switch the rest\n * of a card) promises none of that. So every pill is its own tab stop, the set is a\n * list (a screen reader hears \"list, 4 items\"), and \"current\" is `aria-current` — the\n * attribute a link to where you already are carries.\n */\nexport function NavPills<T extends string>({\n  items,\n  current,\n  onSelect,\n  renderLink,\n  currentType,\n  size = \"md\",\n  landmark = true,\n  itemClassName,\n  className,\n  ref,\n  ...rest\n}: NavPillsProps<T>) {\n  const kitLink = useKitLink();\n  const Root = landmark ? \"nav\" : \"div\";\n  return (\n    <Root\n      {...rest}\n      ref={ref as Ref<HTMLDivElement> | undefined}\n      role={landmark ? undefined : \"group\"}\n      className={cn(\"min-w-0\", className)}\n    >\n      <ul className=\"m-0 flex list-none flex-wrap gap-1 p-0\">\n        {items.map((item) => {\n          const isCurrent = item.value === current;\n          const Icon = item.icon;\n          const pillClass = cn(\n            PILL,\n            size === \"sm\" && PILL_SM,\n            isCurrent ? PILL_CURRENT : PILL_IDLE,\n            item.disabled && item.href === undefined && PILL_DISABLED,\n            itemClassName,\n          );\n          const children = (\n            <>\n              {Icon && <Icon aria-hidden />}\n              {item.label}\n            </>\n          );\n          let pill: ReactNode;\n          if (item.href !== undefined) {\n            const props: NavPillLinkProps = {\n              href: item.href,\n              className: pillClass,\n              children,\n              \"aria-current\": isCurrent ? (currentType ?? \"page\") : undefined,\n              onClick: () => onSelect?.(item.value),\n            };\n            const kit = pickLinkRenderer<NavPillLinkProps>(undefined, kitLink, item.href);\n            pill = renderLink ? (\n              renderLink(props)\n            ) : kit ? (\n              <RenderedKitLink render={kit} props={props} />\n            ) : (\n              <a href={props.href} className={props.className} aria-current={props[\"aria-current\"]} onClick={props.onClick}>\n                {props.children}\n              </a>\n            );\n          } else {\n            pill = (\n              <button\n                type=\"button\"\n                disabled={item.disabled}\n                aria-current={isCurrent ? (currentType ?? \"true\") : undefined}\n                onClick={() => onSelect?.(item.value)}\n                className={pillClass}\n              >\n                {children}\n              </button>\n            );\n          }\n          return (\n            <li key={item.value} className=\"flex\">\n              {pill}\n            </li>\n          );\n        })}\n      </ul>\n    </Root>\n  );\n}\n"],"mappings":";AAoHY,mBACW,KADX;AAnHZ,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB,uBAAuB;AA0DlD,MAAM,OAAO,sIAAsI,UAAU;AAC7J,MAAM,UAAU;AAChB,MAAM,eAAe;AACrB,MAAM,YAAY;AAClB,MAAM,gBAAgB;AAgBf,SAAS,SAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,UAAU,WAAW;AAC3B,QAAM,OAAO,WAAW,QAAQ;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,MAAM,WAAW,SAAY;AAAA,MAC7B,WAAW,GAAG,WAAW,SAAS;AAAA,MAElC,8BAAC,QAAG,WAAU,0CACX,gBAAM,IAAI,CAAC,SAAS;AACnB,cAAM,YAAY,KAAK,UAAU;AACjC,cAAM,OAAO,KAAK;AAClB,cAAM,YAAY;AAAA,UAChB;AAAA,UACA,SAAS,QAAQ;AAAA,UACjB,YAAY,eAAe;AAAA,UAC3B,KAAK,YAAY,KAAK,SAAS,UAAa;AAAA,UAC5C;AAAA,QACF;AACA,cAAM,WACJ,iCACG;AAAA,kBAAQ,oBAAC,QAAK,eAAW,MAAC;AAAA,UAC1B,KAAK;AAAA,WACR;AAEF,YAAI;AACJ,YAAI,KAAK,SAAS,QAAW;AAC3B,gBAAM,QAA0B;AAAA,YAC9B,MAAM,KAAK;AAAA,YACX,WAAW;AAAA,YACX;AAAA,YACA,gBAAgB,YAAa,eAAe,SAAU;AAAA,YACtD,SAAS,MAAM,WAAW,KAAK,KAAK;AAAA,UACtC;AACA,gBAAM,MAAM,iBAAmC,QAAW,SAAS,KAAK,IAAI;AAC5E,iBAAO,aACL,WAAW,KAAK,IACd,MACF,oBAAC,mBAAgB,QAAQ,KAAK,OAAc,IAE5C,oBAAC,OAAE,MAAM,MAAM,MAAM,WAAW,MAAM,WAAW,gBAAc,MAAM,cAAc,GAAG,SAAS,MAAM,SAClG,gBAAM,UACT;AAAA,QAEJ,OAAO;AACL,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU,KAAK;AAAA,cACf,gBAAc,YAAa,eAAe,SAAU;AAAA,cACpD,SAAS,MAAM,WAAW,KAAK,KAAK;AAAA,cACpC,WAAW;AAAA,cAEV;AAAA;AAAA,UACH;AAAA,QAEJ;AACA,eACE,oBAAC,QAAoB,WAAU,QAC5B,kBADM,KAAK,KAEd;AAAA,MAEJ,CAAC,GACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1,111 +1,7 @@
-import * as react from 'react';
-import { ComponentProps, ReactNode } from 'react';
-import { NumberInput } from './number-input.js';
-import './calculator.js';
-import '../delete-account-setting-DAgGBrbn.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './write-lock.js';
-import './mini-calendar.js';
-import './calendar-heatmap.js';
-import './popover.js';
-import '../hooks/use-breakpoint.js';
-import './field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import './month-picker.js';
-import './page-contents.js';
-import './series-chart-labels.js';
-import './pie-chart-labels.js';
-import './sparkline.js';
-import './signature-pad.js';
-import './password-strength.js';
-import './swatch-picker.js';
-import './tile-radio.js';
-import './icon-picker.js';
-import './dialog-frame.js';
-import './modal.js';
-import '../hooks/use-search-param-state.js';
-import './measured-grid.js';
-import './user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import './menu-item.js';
-import './floating-panel.js';
-import '../hooks/use-authed-src.js';
-import './account-settings-labels.js';
-import './bulk-action-bar.js';
-import './list.js';
-import './breadcrumbs.js';
-import './toast.js';
-import './description-list.js';
-import './line-items.js';
-import './error-boundary.js';
-import './authed-image.js';
-import './image-grid.js';
-import './lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import './account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import '../i18n/plurals.js';
-import './appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.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 './focus-ring.js';
-import './numpad-sheet.js';
-
+import type { ComponentProps, ReactNode } from "react";
+import { NumberInput } from "./number-input.js";
 type NumberInputProps = ComponentProps<typeof NumberInput>;
-interface NumberFieldProps extends Omit<NumberInputProps, "value" | "onChange" | "onCommit" | "suffix" | "invalid" | "error" | "locale"> {
+export interface NumberFieldProps extends Omit<NumberInputProps, "value" | "onChange" | "onCommit" | "suffix" | "invalid" | "error" | "locale"> {
     /** The committed number. `null` is "no value" — shown as an empty field. */
     value: number | null;
     /**
@@ -227,7 +123,7 @@ interface NumberFieldProps extends Omit<NumberInputProps, "value" | "onChange" |
  * (string value). A NumberField whose `unit` is a currency says so on the console in
  * development — see NumberInput's money guard.
  */
-declare function NumberField(props: NumberFieldProps): react.JSX.Element;
+export declare function NumberField(props: NumberFieldProps): import("react").JSX.Element;
 /**
  * A {@link NumberField} for whole numbers: `digits={0}` and `calculator={false}` as
  * defaults, each overridable — the preset `RhfIntegerField` (`@eifi1/ui-kit/rhf`) applies to a
@@ -238,6 +134,5 @@ declare function NumberField(props: NumberFieldProps): react.JSX.Element;
  * `??` rather than a spread over the defaults, so a wrapper forwarding its own optional
  * `digits={props.digits}` still gets the preset.
  */
-declare function IntegerField(props: NumberFieldProps): react.JSX.Element;
-
-export { IntegerField, NumberField, type NumberFieldProps };
+export declare function IntegerField(props: NumberFieldProps): import("react").JSX.Element;
+export {};

package/dist/components/number-field.js

@@ -4,6 +4,7 @@ import { useId, useState } from "react";
 import { NumberInput } from "./number-input.js";
 import { evaluateExpression, formatResult } from "../lib/calc.js";
 import { decimalMark } from "../lib/decimal-marks.js";
+import { roundHalfAway } from "../lib/round.js";
 import { useKitLocale } from "../i18n/kit-labels.js";
 function parseLive(text) {
   const t = text.trim().replace(/,/g, ".");
@@ -17,9 +18,7 @@ function parseLive(text) {
 }
 function roundTo(n, digits) {
   if (digits === void 0) return n;
-  const d = Math.min(Math.max(Math.trunc(digits), 0), 100);
-  const rounded = Number(n.toFixed(d));
-  return Number.isFinite(rounded) ? rounded : n;
+  return roundHalfAway(n, Math.min(Math.max(Math.trunc(digits), 0), 100));
 }
 function NumberField(props) {
   const {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/number-field.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { NumberInput } from \"./number-input\";\nimport { evaluateExpression, formatResult } from \"../lib/calc\";\nimport { decimalMark } from \"../lib/decimal-marks\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\n\ntype NumberInputProps = ComponentProps<typeof NumberInput>;\n\nexport interface NumberFieldProps\n  extends Omit<NumberInputProps, \"value\" | \"onChange\" | \"onCommit\" | \"suffix\" | \"invalid\" | \"error\" | \"locale\"> {\n  /** The committed number. `null` is \"no value\" — shown as an empty field. */\n  value: number | null;\n  /**\n   * The parsed number, on blur or Enter — never per keystroke — and only when it\n   * differs from the last one committed. Already rounded to `digits` and clamped\n   * into `[min, max]`. `null` only when `nullable` and the field was emptied.\n   */\n  onCommit: (value: number | null) => void;\n  /**\n   * LIVE MODE: the number the text reads as, on every keystroke (and every step\n   * key) — for a calculator that recomputes as the user types, while `onCommit`\n   * stays the one to save on.\n   *\n   * What it is NOT, until the commit: rounded to `digits` or clamped into\n   * `[min, max]` — a half-typed \"1\" on the way to \"150\" must not read as the\n   * minimum of 100. A calculation reads as its result (\"12+5\" → 17); an empty field\n   * as `null` (whether or not `nullable`); a draft that is no number yet (\"-\", \"12+\")\n   * fires nothing, so the last number stands. On blur/Enter it fires once more with\n   * the committed value if that differs from the last one it reported — the rounded,\n   * clamped or snapped-back number — so a live consumer always ends where `onCommit`\n   * does.\n   *\n   * Feeding it back into `value` is safe: a `value` equal to the number this field\n   * last reported does not re-render the text, so \"1,\" stays \"1,\" while the rest of\n   * the form already shows 1. Not called when `value` changes from outside.\n   */\n  onValueChange?: (value: number | null) => void;\n  /** Round to this many decimals on commit, and show at most this many (trailing\n   *  zeros are trimmed: `digits={2}` shows 12.5, not 12.50). Omit for no rounding. */\n  digits?: number;\n  /** Clamp the committed number into `[min, max]`. Applied after rounding. */\n  min?: number;\n  max?: number;\n  /** An emptied field commits `null`. Without it an empty field is not an answer\n   *  and snaps back to the last value, like any other unparsable text. */\n  nullable?: boolean;\n  /** The unit — \"mm\", \"%\", \"km/h\". */\n  unit?: ReactNode;\n  /** Where `unit` goes: `\"suffix\"` (default) is NumberInput's read-out at the\n   *  field's end edge; `\"label\"` appends it to the label as \"Label (unit)\", for rows\n   *  of narrow fields where a suffix would eat the digits. */\n  unitPlacement?: \"suffix\" | \"label\";\n  /** BCP 47 tag for the decimal mark, else the `<UiKitProvider locale>`, else the\n   *  runtime's. */\n  locale?: string;\n  /** See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** See {@link Input}'s `error`: shown under the field, attached via\n   *  `aria-describedby`, implies `invalid`. */\n  error?: ReactNode;\n  /** Merged with the error's id. Accepted so a form library's control slot (which\n   *  injects `id` / `aria-describedby` / `aria-invalid`) can wrap this directly. */\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n  /**\n   * Set on the `<input>`. Declared, with `id` (from NumberInput) and the two above, so\n   * `Field`'s render-prop spread — `{(ids) => <NumberField {...ids} … />}`, kastlan's\n   * wizard steps — is typed and reaches the input rather than being dropped: before\n   * this, `aria-required` was not in the type and a required number was announced as\n   * optional.\n   */\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n}\n\n/** What the draft reads as while it is being typed — see `onValueChange`. `undefined`\n *  is \"not a number yet\", distinct from `null` (empty). */\nfunction parseLive(text: string): number | null | undefined {\n  const t = text.trim().replace(/,/g, \".\");\n  if (t === \"\") return null;\n  if (/^-?\\d*\\.?\\d*$/.test(t)) {\n    // \"-\", \".\" and \"-.\" pass the pattern and are no number yet.\n    if (!/\\d/.test(t)) return undefined;\n    const n = Number(t);\n    return Number.isFinite(n) ? n : undefined;\n  }\n  return evaluateExpression(t) ?? undefined;\n}\n\n/** `toFixed` rounding rather than `Math.round(n * 10^d)`, which turns 1.005 into\n *  1.00 by way of 100.49999999999999 — the same choice the lenkbank field made. */\nfunction roundTo(n: number, digits: number | undefined): number {\n  if (digits === undefined) return n;\n  const d = Math.min(Math.max(Math.trunc(digits), 0), 100);\n  const rounded = Number(n.toFixed(d));\n  return Number.isFinite(rounded) ? rounded : n;\n}\n\n/**\n * A number field whose value IS a number: {@link NumberInput}'s text, calculator and\n * numpad, with the parse/commit/revert loop every consumer was writing on top of it.\n *\n * WHY THE DRAFT. Half-typed values — \"-\", \"1,\", \"12+\" — are not numbers, and\n * reformatting them mid-keystroke moves the caret and fights the typist; committing\n * per keystroke would also fire whatever a commit fires (a recalculation, a save) for\n * every meaningless intermediate. So the field keeps a draft STRING while it is being\n * typed and resolves it on blur/Enter:\n *\n *  - a number (or a calculation, \"2700+50\") → rounded to `digits`, clamped into\n *    `[min, max]`, committed, and the draft re-rendered from the result;\n *  - empty → `null` when `nullable`, otherwise the same as the next case — `Number(\"\")`\n *    is 0, and clearing a wheelbase and tabbing away must not set it to zero;\n *  - anything else unparsable → the draft SNAPS BACK to the last committed value\n *    rather than sending NaN on for a server to reject.\n *\n * The draft follows `value` when it changes from outside (a reset, a loaded record);\n * a change that came from here arrives back identical and is a no-op.\n *\n * LIVE MODE. A calculator that recomputes per keystroke used to have to pick: this\n * field (limits, rounding, but a number only on blur) or a bare NumberInput (every\n * keystroke, but a string and no limits). `onValueChange` is the per-keystroke\n * channel here, next to the commit rather than instead of it: live numbers for the\n * read-out, `onCommit` for the save. It lives on this field rather than as\n * `min`/`max`/`digits` on NumberInput because parsing, the locale's mark and the\n * limits are what this field already is — a second copy on the string field would be\n * a second, subtly different NumberField.\n *\n * STEPS. `step` (with `min`/`max` as bounds) turns on ArrowUp/ArrowDown and PageUp/\n * PageDown (×10) — see NumberInput's `step`. A step is a draft change like a\n * keystroke: `onValueChange` hears it at once, `onCommit` on blur/Enter. Pick a\n * `step` that `digits` can show (0.25 needs `digits={2}`), or the commit rounds it.\n *\n * LOCALE. The decimal mark is the locale's: a German user sees and types \"1,5\".\n * NumberInput normalises every keystroke to a dot (so its evaluator reads one\n * alphabet); this field maps the dot back before the draft is shown. The field never\n * WRITES digit grouping — \"1.000\" would read as a thousand in German and as one in\n * English, and a field that parses its own display back must not have that ambiguity —\n * but since 0.22 it READS it, through NumberInput (keksdose K5): \"1.234,56\" typed by a\n * German user commits 1234.56 rather than 1.23456, and \"1,234.56\" by an English one\n * likewise. While a figure is typed the typist's own text stays on screen (\"1.234,5\",\n * or a dot typed as the decimal in a comma locale); it is re-spelt in the locale's mark\n * when it commits.\n *\n * LOCKED (0.33.1, Kurvenschmiede). A field that saves itself takes `commit` (or a\n * `disabledReason` of its own), NumberInput's: under a locked `WriteLockProvider` it\n * stays in the tab order showing its value, `readOnly`, with the lock's reason in the\n * kit Tooltip and its description; the step keys, the calculator and the numpad are\n * off, and nothing reaches `onValueChange` or `onCommit`. `disabled` takes it out of\n * the tab order, which is what a lock must not do.\n *\n * NOT FOR MONEY. `digits={2}` rounds, but a currency is more than two decimals: JPY has\n * none, a unit price has four, and the chip, the minor-unit default and `min`/`max` on\n * the SIGNED figure are {@link MoneyField}'s (number value) and {@link AmountInput}'s\n * (string value). A NumberField whose `unit` is a currency says so on the console in\n * development — see NumberInput's money guard.\n */\nexport function NumberField(props: NumberFieldProps) {\n  const {\n    value,\n    onCommit,\n    onValueChange,\n    digits,\n    min,\n    max,\n    nullable = false,\n    unit,\n    unitPlacement = \"suffix\",\n    locale: localeProp,\n    label,\n    invalid,\n    error,\n    id,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  const locale = useKitLocale(localeProp);\n  const mark = decimalMark(locale);\n  const localize = (text: string) => (mark === \",\" ? text.replace(/\\./g, \",\") : text);\n  // `formatResult` for fixed notation: `String(1e-7)` is \"1e-7\", which the field\n  // would read back as 17 (see calc.ts).\n  const format = (n: number | null) =>\n    n === null || !Number.isFinite(n) ? \"\" : localize(formatResult(roundTo(n, digits)));\n\n  const [draft, setDraft] = useState(() => format(value));\n  // Everything the displayed text depends on, not just `value`: switching the\n  // provider's language or a field's `digits` has to re-render the draft too.\n  const [seen, setSeen] = useState({ value, mark, digits });\n  // The last number handed to `onCommit`, so Enter-then-blur (both commit) and a\n  // parent that does not echo the value back cannot commit the same number twice.\n  // State rather than a ref because the external-change branch below resets it\n  // during render, and a ref may not be written there.\n  const [committed, setCommitted] = useState(value);\n  // The last number handed to `onValueChange` — state for the same reason.\n  const [reported, setReported] = useState(value);\n\n  // Adjust state during render rather than in an effect: React re-renders at once\n  // with the new draft, before anything is painted, so there is no frame showing\n  // the old text.\n  if (seen.value !== value || seen.mark !== mark || seen.digits !== digits) {\n    setSeen({ value, mark, digits });\n    // Live mode echoing back what it was just told: the draft already says it, in\n    // the typist's own spelling (\"1,\" or \"12+5\"), and reformatting would fight them.\n    // Only a changed `value` qualifies — a new mark or `digits` still re-renders.\n    const echo =\n      onValueChange !== undefined && value === reported && seen.mark === mark && seen.digits === digits;\n    if (!echo) {\n      setDraft(format(value));\n      setCommitted(value);\n      setReported(value);\n    }\n  }\n\n  const report = (next: number | null) => {\n    if (next === reported) return;\n    setReported(next);\n    onValueChange?.(next);\n  };\n\n  const onText = (text: string) => {\n    setDraft(localize(text));\n    const live = parseLive(text);\n    if (live !== undefined) report(live);\n  };\n\n  const commit = (text: string) => {\n    const trimmed = text.trim();\n    let next: number | null;\n    const snapBack = () => {\n      setDraft(format(committed));\n      report(committed);\n    };\n    if (trimmed === \"\") {\n      if (!nullable) return snapBack();\n      next = null;\n    } else {\n      // `text` is NumberInput's committed form: an evaluated calculation, dot-decimal.\n      // What survives its digits-only fallback can still be \"-\" or \".\" alone.\n      const parsed = Number(trimmed.replace(/,/g, \".\"));\n      if (!Number.isFinite(parsed)) return snapBack();\n      next = roundTo(parsed, digits);\n      if (min !== undefined) next = Math.max(min, next);\n      if (max !== undefined) next = Math.min(max, next);\n    }\n    // Always re-render the draft from the result — \"007\" becomes \"7\", a clamped 500\n    // shows the 100 it was clamped to — even when there is nothing new to commit.\n    setDraft(format(next));\n    report(next);\n    if (next !== committed) {\n      setCommitted(next);\n      onCommit(next);\n    }\n  };\n\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n\n  // Straight onto NumberInput's <input>, which declares both now. They used to be set\n  // on the DOM node from an effect, because NumberInput had no props for them.\n  const required = ariaRequired === true || ariaRequired === \"true\";\n\n  const labelWithUnit =\n    unit !== undefined && unitPlacement === \"label\"\n      ? label === undefined || label === \"\"\n        ? unit\n        : typeof label === \"string\" && typeof unit === \"string\"\n          ? `${label} (${unit})`\n          : (\n            <>\n              {label} ({unit})\n            </>\n          )\n      : label;\n\n  return (\n    <NumberInput\n      {...rest}\n      id={fieldId}\n      aria-describedby={ariaDescribedBy}\n      aria-required={required || undefined}\n      label={labelWithUnit}\n      value={draft}\n      onChange={onText}\n      onCommit={commit}\n      min={min}\n      max={max}\n      // The mark this field spells its draft in, so the two can never disagree when\n      // this field's `locale` is not the provider's.\n      locale={locale}\n      suffix={unitPlacement === \"suffix\" ? unit : undefined}\n      invalid={invalid || ariaInvalid === true || ariaInvalid === \"true\"}\n      // NumberInput's `error` — the message, the description, the paint, and Input's\n      // steady box: no wrapper for a field that never takes `error`, and the SAME one\n      // for a field that does, message or not, so the message coming or going never\n      // remounts the <input> mid-keystroke. Only forwarded when it was passed, since\n      // passing the key is what asks for the box.\n      {...(\"error\" in props ? { error } : {})}\n    />\n  );\n}\n\n/**\n * A {@link NumberField} for whole numbers: `digits={0}` and `calculator={false}` as\n * defaults, each overridable — the preset `RhfIntegerField` (`@eifi1/ui-kit/rhf`) applies to a\n * form-bound field, for the plain one (kastlan 51: a building's construction year in a\n * wizard's local state, an entity id in the document upload spelled the two props out\n * by hand).\n *\n * `??` rather than a spread over the defaults, so a wrapper forwarding its own optional\n * `digits={props.digits}` still gets the preset.\n */\nexport function IntegerField(props: NumberFieldProps) {\n  return <NumberField {...props} digits={props.digits ?? 0} calculator={props.calculator ?? false} />;\n}\n"],"mappings":";AA6QY,mBAOR,KAPQ;AA7QZ,SAAS,OAAO,gBAAgB;AAEhC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB,oBAAoB;AACjD,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAwE7B,SAAS,UAAU,MAAyC;AAC1D,QAAM,IAAI,KAAK,KAAK,EAAE,QAAQ,MAAM,GAAG;AACvC,MAAI,MAAM,GAAI,QAAO;AACrB,MAAI,gBAAgB,KAAK,CAAC,GAAG;AAE3B,QAAI,CAAC,KAAK,KAAK,CAAC,EAAG,QAAO;AAC1B,UAAM,IAAI,OAAO,CAAC;AAClB,WAAO,OAAO,SAAS,CAAC,IAAI,IAAI;AAAA,EAClC;AACA,SAAO,mBAAmB,CAAC,KAAK;AAClC;AAIA,SAAS,QAAQ,GAAW,QAAoC;AAC9D,MAAI,WAAW,OAAW,QAAO;AACjC,QAAM,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,MAAM,GAAG,CAAC,GAAG,GAAG;AACvD,QAAM,UAAU,OAAO,EAAE,QAAQ,CAAC,CAAC;AACnC,SAAO,OAAO,SAAS,OAAO,IAAI,UAAU;AAC9C;AA4DO,SAAS,YAAY,OAAyB;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR;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,UAAU;AACtC,QAAM,OAAO,YAAY,MAAM;AAC/B,QAAM,WAAW,CAAC,SAAkB,SAAS,MAAM,KAAK,QAAQ,OAAO,GAAG,IAAI;AAG9E,QAAM,SAAS,CAAC,MACd,MAAM,QAAQ,CAAC,OAAO,SAAS,CAAC,IAAI,KAAK,SAAS,aAAa,QAAQ,GAAG,MAAM,CAAC,CAAC;AAEpF,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,MAAM,OAAO,KAAK,CAAC;AAGtD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE,OAAO,MAAM,OAAO,CAAC;AAKxD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAK9C,MAAI,KAAK,UAAU,SAAS,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AACxE,YAAQ,EAAE,OAAO,MAAM,OAAO,CAAC;AAI/B,UAAM,OACJ,kBAAkB,UAAa,UAAU,YAAY,KAAK,SAAS,QAAQ,KAAK,WAAW;AAC7F,QAAI,CAAC,MAAM;AACT,eAAS,OAAO,KAAK,CAAC;AACtB,mBAAa,KAAK;AAClB,kBAAY,KAAK;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,SAAS,CAAC,SAAwB;AACtC,QAAI,SAAS,SAAU;AACvB,gBAAY,IAAI;AAChB,oBAAgB,IAAI;AAAA,EACtB;AAEA,QAAM,SAAS,CAAC,SAAiB;AAC/B,aAAS,SAAS,IAAI,CAAC;AACvB,UAAM,OAAO,UAAU,IAAI;AAC3B,QAAI,SAAS,OAAW,QAAO,IAAI;AAAA,EACrC;AAEA,QAAM,SAAS,CAAC,SAAiB;AAC/B,UAAM,UAAU,KAAK,KAAK;AAC1B,QAAI;AACJ,UAAM,WAAW,MAAM;AACrB,eAAS,OAAO,SAAS,CAAC;AAC1B,aAAO,SAAS;AAAA,IAClB;AACA,QAAI,YAAY,IAAI;AAClB,UAAI,CAAC,SAAU,QAAO,SAAS;AAC/B,aAAO;AAAA,IACT,OAAO;AAGL,YAAM,SAAS,OAAO,QAAQ,QAAQ,MAAM,GAAG,CAAC;AAChD,UAAI,CAAC,OAAO,SAAS,MAAM,EAAG,QAAO,SAAS;AAC9C,aAAO,QAAQ,QAAQ,MAAM;AAC7B,UAAI,QAAQ,OAAW,QAAO,KAAK,IAAI,KAAK,IAAI;AAChD,UAAI,QAAQ,OAAW,QAAO,KAAK,IAAI,KAAK,IAAI;AAAA,IAClD;AAGA,aAAS,OAAO,IAAI,CAAC;AACrB,WAAO,IAAI;AACX,QAAI,SAAS,WAAW;AACtB,mBAAa,IAAI;AACjB,eAAS,IAAI;AAAA,IACf;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,MAAM;AAItB,QAAM,WAAW,iBAAiB,QAAQ,iBAAiB;AAE3D,QAAM,gBACJ,SAAS,UAAa,kBAAkB,UACpC,UAAU,UAAa,UAAU,KAC/B,OACA,OAAO,UAAU,YAAY,OAAO,SAAS,WAC3C,GAAG,KAAK,KAAK,IAAI,MAEjB,iCACG;AAAA;AAAA,IAAM;AAAA,IAAG;AAAA,IAAK;AAAA,KACjB,IAEJ;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAI;AAAA,MACJ,oBAAkB;AAAA,MAClB,iBAAe,YAAY;AAAA,MAC3B,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MAGA;AAAA,MACA,QAAQ,kBAAkB,WAAW,OAAO;AAAA,MAC5C,SAAS,WAAW,gBAAgB,QAAQ,gBAAgB;AAAA,MAM3D,GAAI,WAAW,QAAQ,EAAE,MAAM,IAAI,CAAC;AAAA;AAAA,EACvC;AAEJ;AAYO,SAAS,aAAa,OAAyB;AACpD,SAAO,oBAAC,eAAa,GAAG,OAAO,QAAQ,MAAM,UAAU,GAAG,YAAY,MAAM,cAAc,OAAO;AACnG;","names":[]}
+{"version":3,"sources":["../../src/components/number-field.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { NumberInput } from \"./number-input\";\nimport { evaluateExpression, formatResult } from \"../lib/calc\";\nimport { decimalMark } from \"../lib/decimal-marks\";\nimport { roundHalfAway } from \"../lib/round\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\n\ntype NumberInputProps = ComponentProps<typeof NumberInput>;\n\nexport interface NumberFieldProps\n  extends Omit<NumberInputProps, \"value\" | \"onChange\" | \"onCommit\" | \"suffix\" | \"invalid\" | \"error\" | \"locale\"> {\n  /** The committed number. `null` is \"no value\" — shown as an empty field. */\n  value: number | null;\n  /**\n   * The parsed number, on blur or Enter — never per keystroke — and only when it\n   * differs from the last one committed. Already rounded to `digits` and clamped\n   * into `[min, max]`. `null` only when `nullable` and the field was emptied.\n   */\n  onCommit: (value: number | null) => void;\n  /**\n   * LIVE MODE: the number the text reads as, on every keystroke (and every step\n   * key) — for a calculator that recomputes as the user types, while `onCommit`\n   * stays the one to save on.\n   *\n   * What it is NOT, until the commit: rounded to `digits` or clamped into\n   * `[min, max]` — a half-typed \"1\" on the way to \"150\" must not read as the\n   * minimum of 100. A calculation reads as its result (\"12+5\" → 17); an empty field\n   * as `null` (whether or not `nullable`); a draft that is no number yet (\"-\", \"12+\")\n   * fires nothing, so the last number stands. On blur/Enter it fires once more with\n   * the committed value if that differs from the last one it reported — the rounded,\n   * clamped or snapped-back number — so a live consumer always ends where `onCommit`\n   * does.\n   *\n   * Feeding it back into `value` is safe: a `value` equal to the number this field\n   * last reported does not re-render the text, so \"1,\" stays \"1,\" while the rest of\n   * the form already shows 1. Not called when `value` changes from outside.\n   */\n  onValueChange?: (value: number | null) => void;\n  /** Round to this many decimals on commit, and show at most this many (trailing\n   *  zeros are trimmed: `digits={2}` shows 12.5, not 12.50). Omit for no rounding. */\n  digits?: number;\n  /** Clamp the committed number into `[min, max]`. Applied after rounding. */\n  min?: number;\n  max?: number;\n  /** An emptied field commits `null`. Without it an empty field is not an answer\n   *  and snaps back to the last value, like any other unparsable text. */\n  nullable?: boolean;\n  /** The unit — \"mm\", \"%\", \"km/h\". */\n  unit?: ReactNode;\n  /** Where `unit` goes: `\"suffix\"` (default) is NumberInput's read-out at the\n   *  field's end edge; `\"label\"` appends it to the label as \"Label (unit)\", for rows\n   *  of narrow fields where a suffix would eat the digits. */\n  unitPlacement?: \"suffix\" | \"label\";\n  /** BCP 47 tag for the decimal mark, else the `<UiKitProvider locale>`, else the\n   *  runtime's. */\n  locale?: string;\n  /** See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** See {@link Input}'s `error`: shown under the field, attached via\n   *  `aria-describedby`, implies `invalid`. */\n  error?: ReactNode;\n  /** Merged with the error's id. Accepted so a form library's control slot (which\n   *  injects `id` / `aria-describedby` / `aria-invalid`) can wrap this directly. */\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n  /**\n   * Set on the `<input>`. Declared, with `id` (from NumberInput) and the two above, so\n   * `Field`'s render-prop spread — `{(ids) => <NumberField {...ids} … />}`, kastlan's\n   * wizard steps — is typed and reaches the input rather than being dropped: before\n   * this, `aria-required` was not in the type and a required number was announced as\n   * optional.\n   */\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n}\n\n/** What the draft reads as while it is being typed — see `onValueChange`. `undefined`\n *  is \"not a number yet\", distinct from `null` (empty). */\nfunction parseLive(text: string): number | null | undefined {\n  const t = text.trim().replace(/,/g, \".\");\n  if (t === \"\") return null;\n  if (/^-?\\d*\\.?\\d*$/.test(t)) {\n    // \"-\", \".\" and \"-.\" pass the pattern and are no number yet.\n    if (!/\\d/.test(t)) return undefined;\n    const n = Number(t);\n    return Number.isFinite(n) ? n : undefined;\n  }\n  return evaluateExpression(t) ?? undefined;\n}\n\n/** `n` at `digits` decimals, half away from zero as WRITTEN — lib/round's\n *  `roundHalfAway`, shared with `roundToCurrency` and AmountInput (BUG-11 follow-up,\n *  refactor audit 2026-10). The `toFixed` this was turned 1.005 into 1.00 (1.005 is\n *  1.00499… in binary) and −0.004 into −0; neither `Math.round(n * 10^d)` nor `toFixed`\n *  rounds the figure a person typed. `digits` is cut to a whole 0–100. */\nfunction roundTo(n: number, digits: number | undefined): number {\n  if (digits === undefined) return n;\n  return roundHalfAway(n, Math.min(Math.max(Math.trunc(digits), 0), 100));\n}\n\n/**\n * A number field whose value IS a number: {@link NumberInput}'s text, calculator and\n * numpad, with the parse/commit/revert loop every consumer was writing on top of it.\n *\n * WHY THE DRAFT. Half-typed values — \"-\", \"1,\", \"12+\" — are not numbers, and\n * reformatting them mid-keystroke moves the caret and fights the typist; committing\n * per keystroke would also fire whatever a commit fires (a recalculation, a save) for\n * every meaningless intermediate. So the field keeps a draft STRING while it is being\n * typed and resolves it on blur/Enter:\n *\n *  - a number (or a calculation, \"2700+50\") → rounded to `digits`, clamped into\n *    `[min, max]`, committed, and the draft re-rendered from the result;\n *  - empty → `null` when `nullable`, otherwise the same as the next case — `Number(\"\")`\n *    is 0, and clearing a wheelbase and tabbing away must not set it to zero;\n *  - anything else unparsable → the draft SNAPS BACK to the last committed value\n *    rather than sending NaN on for a server to reject.\n *\n * The draft follows `value` when it changes from outside (a reset, a loaded record);\n * a change that came from here arrives back identical and is a no-op.\n *\n * LIVE MODE. A calculator that recomputes per keystroke used to have to pick: this\n * field (limits, rounding, but a number only on blur) or a bare NumberInput (every\n * keystroke, but a string and no limits). `onValueChange` is the per-keystroke\n * channel here, next to the commit rather than instead of it: live numbers for the\n * read-out, `onCommit` for the save. It lives on this field rather than as\n * `min`/`max`/`digits` on NumberInput because parsing, the locale's mark and the\n * limits are what this field already is — a second copy on the string field would be\n * a second, subtly different NumberField.\n *\n * STEPS. `step` (with `min`/`max` as bounds) turns on ArrowUp/ArrowDown and PageUp/\n * PageDown (×10) — see NumberInput's `step`. A step is a draft change like a\n * keystroke: `onValueChange` hears it at once, `onCommit` on blur/Enter. Pick a\n * `step` that `digits` can show (0.25 needs `digits={2}`), or the commit rounds it.\n *\n * LOCALE. The decimal mark is the locale's: a German user sees and types \"1,5\".\n * NumberInput normalises every keystroke to a dot (so its evaluator reads one\n * alphabet); this field maps the dot back before the draft is shown. The field never\n * WRITES digit grouping — \"1.000\" would read as a thousand in German and as one in\n * English, and a field that parses its own display back must not have that ambiguity —\n * but since 0.22 it READS it, through NumberInput (keksdose K5): \"1.234,56\" typed by a\n * German user commits 1234.56 rather than 1.23456, and \"1,234.56\" by an English one\n * likewise. While a figure is typed the typist's own text stays on screen (\"1.234,5\",\n * or a dot typed as the decimal in a comma locale); it is re-spelt in the locale's mark\n * when it commits.\n *\n * LOCKED (0.33.1, Kurvenschmiede). A field that saves itself takes `commit` (or a\n * `disabledReason` of its own), NumberInput's: under a locked `WriteLockProvider` it\n * stays in the tab order showing its value, `readOnly`, with the lock's reason in the\n * kit Tooltip and its description; the step keys, the calculator and the numpad are\n * off, and nothing reaches `onValueChange` or `onCommit`. `disabled` takes it out of\n * the tab order, which is what a lock must not do.\n *\n * NOT FOR MONEY. `digits={2}` rounds, but a currency is more than two decimals: JPY has\n * none, a unit price has four, and the chip, the minor-unit default and `min`/`max` on\n * the SIGNED figure are {@link MoneyField}'s (number value) and {@link AmountInput}'s\n * (string value). A NumberField whose `unit` is a currency says so on the console in\n * development — see NumberInput's money guard.\n */\nexport function NumberField(props: NumberFieldProps) {\n  const {\n    value,\n    onCommit,\n    onValueChange,\n    digits,\n    min,\n    max,\n    nullable = false,\n    unit,\n    unitPlacement = \"suffix\",\n    locale: localeProp,\n    label,\n    invalid,\n    error,\n    id,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  const locale = useKitLocale(localeProp);\n  const mark = decimalMark(locale);\n  const localize = (text: string) => (mark === \",\" ? text.replace(/\\./g, \",\") : text);\n  // `formatResult` for fixed notation: `String(1e-7)` is \"1e-7\", which the field\n  // would read back as 17 (see calc.ts).\n  const format = (n: number | null) =>\n    n === null || !Number.isFinite(n) ? \"\" : localize(formatResult(roundTo(n, digits)));\n\n  const [draft, setDraft] = useState(() => format(value));\n  // Everything the displayed text depends on, not just `value`: switching the\n  // provider's language or a field's `digits` has to re-render the draft too.\n  const [seen, setSeen] = useState({ value, mark, digits });\n  // The last number handed to `onCommit`, so Enter-then-blur (both commit) and a\n  // parent that does not echo the value back cannot commit the same number twice.\n  // State rather than a ref because the external-change branch below resets it\n  // during render, and a ref may not be written there.\n  const [committed, setCommitted] = useState(value);\n  // The last number handed to `onValueChange` — state for the same reason.\n  const [reported, setReported] = useState(value);\n\n  // Adjust state during render rather than in an effect: React re-renders at once\n  // with the new draft, before anything is painted, so there is no frame showing\n  // the old text.\n  if (seen.value !== value || seen.mark !== mark || seen.digits !== digits) {\n    setSeen({ value, mark, digits });\n    // Live mode echoing back what it was just told: the draft already says it, in\n    // the typist's own spelling (\"1,\" or \"12+5\"), and reformatting would fight them.\n    // Only a changed `value` qualifies — a new mark or `digits` still re-renders.\n    const echo =\n      onValueChange !== undefined && value === reported && seen.mark === mark && seen.digits === digits;\n    if (!echo) {\n      setDraft(format(value));\n      setCommitted(value);\n      setReported(value);\n    }\n  }\n\n  const report = (next: number | null) => {\n    if (next === reported) return;\n    setReported(next);\n    onValueChange?.(next);\n  };\n\n  const onText = (text: string) => {\n    setDraft(localize(text));\n    const live = parseLive(text);\n    if (live !== undefined) report(live);\n  };\n\n  const commit = (text: string) => {\n    const trimmed = text.trim();\n    let next: number | null;\n    const snapBack = () => {\n      setDraft(format(committed));\n      report(committed);\n    };\n    if (trimmed === \"\") {\n      if (!nullable) return snapBack();\n      next = null;\n    } else {\n      // `text` is NumberInput's committed form: an evaluated calculation, dot-decimal.\n      // What survives its digits-only fallback can still be \"-\" or \".\" alone.\n      const parsed = Number(trimmed.replace(/,/g, \".\"));\n      if (!Number.isFinite(parsed)) return snapBack();\n      next = roundTo(parsed, digits);\n      if (min !== undefined) next = Math.max(min, next);\n      if (max !== undefined) next = Math.min(max, next);\n    }\n    // Always re-render the draft from the result — \"007\" becomes \"7\", a clamped 500\n    // shows the 100 it was clamped to — even when there is nothing new to commit.\n    setDraft(format(next));\n    report(next);\n    if (next !== committed) {\n      setCommitted(next);\n      onCommit(next);\n    }\n  };\n\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n\n  // Straight onto NumberInput's <input>, which declares both now. They used to be set\n  // on the DOM node from an effect, because NumberInput had no props for them.\n  const required = ariaRequired === true || ariaRequired === \"true\";\n\n  const labelWithUnit =\n    unit !== undefined && unitPlacement === \"label\"\n      ? label === undefined || label === \"\"\n        ? unit\n        : typeof label === \"string\" && typeof unit === \"string\"\n          ? `${label} (${unit})`\n          : (\n            <>\n              {label} ({unit})\n            </>\n          )\n      : label;\n\n  return (\n    <NumberInput\n      {...rest}\n      id={fieldId}\n      aria-describedby={ariaDescribedBy}\n      aria-required={required || undefined}\n      label={labelWithUnit}\n      value={draft}\n      onChange={onText}\n      onCommit={commit}\n      min={min}\n      max={max}\n      // The mark this field spells its draft in, so the two can never disagree when\n      // this field's `locale` is not the provider's.\n      locale={locale}\n      suffix={unitPlacement === \"suffix\" ? unit : undefined}\n      invalid={invalid || ariaInvalid === true || ariaInvalid === \"true\"}\n      // NumberInput's `error` — the message, the description, the paint, and Input's\n      // steady box: no wrapper for a field that never takes `error`, and the SAME one\n      // for a field that does, message or not, so the message coming or going never\n      // remounts the <input> mid-keystroke. Only forwarded when it was passed, since\n      // passing the key is what asks for the box.\n      {...(\"error\" in props ? { error } : {})}\n    />\n  );\n}\n\n/**\n * A {@link NumberField} for whole numbers: `digits={0}` and `calculator={false}` as\n * defaults, each overridable — the preset `RhfIntegerField` (`@eifi1/ui-kit/rhf`) applies to a\n * form-bound field, for the plain one (kastlan 51: a building's construction year in a\n * wizard's local state, an entity id in the document upload spelled the two props out\n * by hand).\n *\n * `??` rather than a spread over the defaults, so a wrapper forwarding its own optional\n * `digits={props.digits}` still gets the preset.\n */\nexport function IntegerField(props: NumberFieldProps) {\n  return <NumberField {...props} digits={props.digits ?? 0} calculator={props.calculator ?? false} />;\n}\n"],"mappings":"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","names":[]}

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

@@ -1,109 +1,11 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { CalculatorButtonLabels } from './calculator.js';
-import { NumberPadSheetLabels } from './numpad-sheet.js';
-import { CommitScope } from './write-lock.js';
-import '../delete-account-setting-DAgGBrbn.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './mini-calendar.js';
-import './calendar-heatmap.js';
-import './popover.js';
-import '../hooks/use-breakpoint.js';
-import './field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import './month-picker.js';
-import './page-contents.js';
-import './series-chart-labels.js';
-import './pie-chart-labels.js';
-import './sparkline.js';
-import './signature-pad.js';
-import './password-strength.js';
-import './swatch-picker.js';
-import './tile-radio.js';
-import './icon-picker.js';
-import './dialog-frame.js';
-import './modal.js';
-import '../hooks/use-search-param-state.js';
-import './measured-grid.js';
-import './user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import './menu-item.js';
-import './floating-panel.js';
-import '../hooks/use-authed-src.js';
-import './account-settings-labels.js';
-import './bulk-action-bar.js';
-import './list.js';
-import './breadcrumbs.js';
-import './toast.js';
-import './description-list.js';
-import './line-items.js';
-import './error-boundary.js';
-import './authed-image.js';
-import './image-grid.js';
-import './lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import './account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import '../i18n/plurals.js';
-import './appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.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 './focus-ring.js';
-
-interface NumberInputProps {
+import type { ReactNode, Ref } from "react";
+import { type CalculatorButtonLabels } from "./calculator.js";
+import { type NumberPadSheetLabels } from "./numpad-sheet.js";
+import { type DisabledReasonDisplay } from "./field-parts.js";
+import type { CommitScope } from "./write-lock.js";
+/** {@link NumberInput}'s props — exported since 0.34 (refactor audit 2026-10, API-9): a
+ *  wrapper typed itself off `ComponentProps<typeof NumberInput>` until then. */
+export interface NumberInputProps {
     /** The text, DOT-decimal ("1234.5", or a calculation being typed: "12+5"), as
      *  `onChange` reports it — so a caller's `Number(value)` reads it. The field SHOWS it
      *  in the locale's mark (see `locale`). A comma here is read as the decimal mark too,
@@ -117,7 +19,9 @@ interface NumberInputProps {
      * fields so the save always sees the resolved number, never "10+5". */
     onCommit?: (value: string) => void;
     label?: ReactNode;
-    ariaLabel?: string;
+    /** Names the field when it has no visible `label` (a table cell, a phone's display
+     *  shape). */
+    "aria-label"?: string;
     /** Names for the calculator this field renders — its trigger, and the controls
      *  inside the popover — and for the numpad sheet it opens on a phone. Overrides
      *  for THIS field only: both resolve the `calculator` namespace of
@@ -238,11 +142,18 @@ interface NumberInputProps {
      * Combobox family's lock is. Nothing changes the value: the step keys do nothing, the
      * calculator and the phone's numpad are not offered, and neither blur nor Enter
      * commits — so `onChange` and `onCommit` are never called. Enter is swallowed, so the
-     * field does not submit the form around it. The reason is in the kit {@link Tooltip}
+     * field does not submit the form around it. The reason is a line under the field at
+     * Large and on a touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`),
      * and on the input's `aria-describedby`, between the caption and the error. Wins over
      * `disabled`.
      */
     disabledReason?: ReactNode;
+    /**
+     * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line
+     * under the field at Large and on a touch screen, the tooltip otherwise (§4 "No fact
+     * only in a tooltip"; DUP-3, refactor audit 2026-10).
+     */
+    disabledReasonDisplay?: DisabledReasonDisplay;
     /**
      * This field COMMITS — {@link Button}'s `commit`: under a locked
      * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason
@@ -252,6 +163,13 @@ interface NumberInputProps {
      * {@link IntegerField} pass it on.
      */
     commit?: CommitScope;
+    /**
+     * The `<input>`, as a React 19 ref prop (0.34, API-3, refactor audit 2026-10): the one
+     * focusable field of its family with no ref at all, so react-hook-form's focus-on-error
+     * could reach it only through /rhf's id lookup, and an app not at all.
+     * {@link NumberField} and {@link IntegerField} pass it on.
+     */
+    ref?: Ref<HTMLInputElement>;
 }
 /**
  * `current` moved by `count` steps (negative = down), on the grid `origin + k × step`
@@ -263,7 +181,7 @@ interface NumberInputProps {
  * binary noise goes: `0.1 × 3` is 0.30000000000000004, and `toFixed(1)` of it is
  * "0.3". Summing steps would accumulate that noise press by press instead.
  */
-declare function stepNumber(current: number | null, count: number, step: number, min?: number, max?: number): number;
+export declare function stepNumber(current: number | null, count: number, step: number, min?: number, max?: number): number;
 /**
  * A numeric text field with a built-in calculator: type a calculation straight
  * in (e.g. "12+5", evaluated on blur/Enter) or click the trailing calculator
@@ -298,6 +216,4 @@ declare function stepNumber(current: number | null, count: number, step: number,
  * locale's mark, without grouping, once the figure settles (blur, Enter, a step or a
  * calculator result) or when the value changes from outside.
  */
-declare function NumberInput(props: NumberInputProps): react.JSX.Element;
-
-export { NumberInput, stepNumber };
+export declare function NumberInput(props: NumberInputProps): import("react").JSX.Element;