basalt-ui 1.27.0 → 1.28.0

package/src/data/index.ts

@@ -35,7 +35,35 @@
  */
 
 // ── BasaltDataTable (+ @tanstack/react-table re-exports) ──────────────────────
-export * from './table'
+export {
+  BasaltDataTable,
+  type BasaltDataTableProps,
+  type BasaltDataTableSlot,
+  type DataTableAlign,
+  type DataTableColumnId,
+  type DataTableColumnPinning,
+  type DataTableFacet,
+  type DataTableFacetOption,
+  createColumnHelper,
+  useReactTable,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  type ColumnDef,
+  type SortingState,
+  type ColumnHelper,
+  type PaginationState,
+  type ColumnPinningState,
+  type ColumnFiltersState,
+  type RowSelectionState,
+} from './table'
 
 // ── BasaltVirtualList ─────────────────────────────────────────────────────────
-export * from './virtual'
+export {
+  BasaltVirtualList,
+  type BasaltVirtualListHandle,
+  type BasaltVirtualListProps,
+  type BasaltVirtualListSlot,
+} from './virtual'

package/src/data/query-branch.ts

@@ -0,0 +1,53 @@
+/**
+ * The uniform query contract `./data`'s two containers resolve (law C3, components audit #3).
+ *
+ * `BasaltDataTable` took `isLoading` + `emptyState` and had NO error branch at all;
+ * `BasaltVirtualList` took `isLoading` alone. Both therefore steered a caller into the same wrong
+ * render `QueryState` exists to delete — *No data to display.* printed over a 500 — and neither
+ * could be handed a `UseQueryResult` at all.
+ *
+ * This is not a second `QueryState`. `QueryState` REPLACES its children with a branch; a table has
+ * to keep its `<thead>`, its toolbar and its header drawn and swap only the `<tbody>`, so what it
+ * needs from the contract is the BRANCH, not the rendering. Hence one function, and the same
+ * precedence `QueryState` documents, read from one place so the two cannot drift.
+ */
+import { assertQueryStateLike } from '../common/query-state-like'
+import type { QueryStateLike } from '../common/query-state-like'
+
+/**
+ * Which body a data container paints.
+ *
+ * `'ready'` covers three of `QueryState`'s four cases — data, an EMPTY resolved result, and an
+ * error that arrived over cached data. The container itself decides between rows and its own empty
+ * state, because it already knows whether it has any (`table.getRowCount()`, `items.length`) and a
+ * query envelope does not.
+ *
+ * A refetch that fails while rows are already on screen therefore keeps the rows, with no banner —
+ * that is `QueryState`'s "a background refetch failing must not blank a page that already works",
+ * minus the banner it draws. Compose `QueryState` AROUND the container when the banner is wanted.
+ */
+export type DataQueryBranch = 'pending' | 'error' | 'ready'
+
+/**
+ * Resolves a `QueryStateLike` to the branch its container should paint, asserting first — through
+ * the SAME `assertQueryStateLike` `QueryState` runs (`common/query-state-like.ts`), so the table and
+ * the wrapper cannot disagree about what a valid envelope is. This function once carried its own
+ * narrower copy that skipped the `data` key and the `refetch()` check, which let a result whose
+ * Retry button did nothing through the very branch that renders one.
+ *
+ * `isError` WITH data is `'ready'`, not `'error'`: the stale rows stay on screen. That is deliberate
+ * and it differs from `QueryState`, which paints the same case as children PLUS a "showing cached
+ * data" banner — a container swaps only its body, so it has nowhere to draw one. Compose
+ * `QueryState` AROUND the container when the banner is wanted. Pinned in `data-table.test.tsx`.
+ */
+export function dataQueryBranch(
+  component: string,
+  query: QueryStateLike<unknown>,
+): DataQueryBranch {
+  assertQueryStateLike(component, query)
+  if (query.isError && query.data === undefined) return 'error'
+  // `idle` with no data is an `enabled: false` query, not a pending one — it resolves to the
+  // container's own empty state, exactly as `QueryState` resolves it to `empty`.
+  if (query.data === undefined && query.fetchStatus !== 'idle') return 'pending'
+  return 'ready'
+}

package/src/data/table.ts

@@ -23,7 +23,10 @@
 export { BasaltDataTable } from './data-table'
 export type {
   BasaltDataTableProps,
+  BasaltDataTableSlot,
   DataTableAlign,
+  DataTableColumnId,
+  DataTableColumnPinning,
   DataTableFacet,
   DataTableFacetOption,
 } from './data-table'
@@ -48,6 +51,8 @@ export {
   type ColumnHelper,
   type PaginationState,
   type ColumnPinningState,
+  // The selection map `rowSelection`/`onRowSelectionChange` speak — `Record<rowId, boolean>`.
+  type RowSelectionState,
   // The type `onColumnFiltersChange` hands back — needed at the call site for server-side faceting.
   type ColumnFiltersState,
 } from '@tanstack/react-table'

package/src/data/virtual-list.tsx

@@ -17,11 +17,23 @@
  */
 import { Box, Skeleton } from '@mantine/core'
 import { useVirtualizer } from '@tanstack/react-virtual'
-import { useRef } from 'react'
-import type { ReactNode } from 'react'
+import type { ScrollToOptions, Virtualizer } from '@tanstack/react-virtual'
+import { useImperativeHandle, useRef } from 'react'
+import type { ReactNode, Ref } from 'react'
+import { cx } from '../common/props'
+import type { BasaltProps, SlotStylesProps } from '../common/props'
+import { BASALT_PREFIX } from '../common/errors'
+import { assertRequiredProps, useValidateProps } from '../common/validate'
+import { ErrorState } from '../dashboard/query-state'
+import type { QueryStateLike } from '../dashboard/query-state'
+import { dataQueryBranch } from './query-branch'
 
 // ── Props ─────────────────────────────────────────────────────────────────────
 
+/** The two boxes `BasaltVirtualList` paints: `root` is the scroll container, `row` is each
+ * absolutely-positioned virtual item. */
+export type BasaltVirtualListSlot = 'root' | 'row'
+
 /**
  * Props for {@link BasaltVirtualList}.
  *
@@ -35,42 +47,97 @@ import type { ReactNode } from 'react'
  *   getItemKey: (item) => item.id,
  * }
  */
-export type BasaltVirtualListProps<T> = {
-  /** All items in the list (unsliced — virtualization is handled internally). */
-  items: T[]
-  /** Height of the scroll container. Accepts a CSS value ('400px', '60vh') or a number in px. */
-  height: number | string
-  /**
-   * Estimated row height in px (used for virtual layout before measure).
-   * @default 40
-   */
-  estimateSize?: number
-  /**
-   * Number of items rendered beyond the visible viewport (above + below) to reduce flicker.
-   * @default 5
-   */
-  overscan?: number
-  /**
-   * Render function for a single item. Receives the item and its list index.
-   * The returned node is placed inside an absolutely-positioned row container.
-   */
-  renderItem: (item: T, index: number) => ReactNode
-  /**
-   * Stable key for each item. Falls back to the numeric list index when omitted.
-   * Providing a stable key prevents react reconciliation churn on scroll.
-   */
-  getItemKey?: (item: T, index: number) => string | number
-  /**
-   * When true, renders skeleton placeholder rows at the given height instead of the virtual item
-   * list. The scroll container is still rendered at the specified `height`. Use while async data
-   * is loading.
-   */
-  isLoading?: boolean
+export type BasaltVirtualListProps<T> = BasaltProps &
+  SlotStylesProps<BasaltVirtualListSlot> & {
+    /** All items in the list (unsliced — virtualization is handled internally). */
+    items: T[]
+    /** Height of the scroll container. Accepts a CSS value ('400px', '60vh') or a number in px. */
+    height: number | string
+    /**
+     * Estimated row height in px (used for virtual layout before measure).
+     * @default 40
+     */
+    estimateSize?: number
+    /**
+     * Number of items rendered beyond the visible viewport (above + below) to reduce flicker.
+     * @default 5
+     */
+    overscan?: number
+    /**
+     * Render function for a single item. Receives the item and its list index.
+     * The returned node is placed inside an absolutely-positioned row container.
+     */
+    renderItem: (item: T, index: number) => ReactNode
+    /**
+     * Stable key for each item, handed straight to the virtualizer's own `getItemKey` — required,
+     * not merely recommended: the previous index fallback hid stale rows across a mutation (an
+     * insert/delete shifting every index below it keeps rendering the OLD item at each shifted
+     * index until React's own reconciliation happens to catch up), silently, in the one component
+     * whose job is a long mutable list.
+     */
+    getItemKey: (item: T, index: number) => string | number
+    /**
+     * When true, renders skeleton placeholder rows at the given height instead of the virtual item
+     * list. The scroll container is still rendered at the specified `height`. Use while async data
+     * is loading.
+     *
+     * Superseded by `query`, which resolves this branch AND the two this prop cannot express — pass
+     * both and `query` wins, with a dev warning.
+     */
+    isLoading?: boolean
+    /**
+     * The result behind `items`, resolved into a body: pending → the skeleton rows, error with no
+     * data → an `ErrorState` inside the scroll box (the query's own `refetch` behind Retry),
+     * anything else → the rows, or `emptyState` when `items` is empty.
+     *
+     * Law C3's uniform container contract (`docs/CONTROLS-SPEC.md` §1). The list took `isLoading`
+     * and nothing else (components audit #3), so a failed fetch and a genuinely empty list rendered
+     * the same blank box — the exact false claim `QueryState` exists to delete.
+     *
+     * The container keeps its declared `height` through every branch, so the page does not jump as
+     * the state resolves.
+     */
+    query?: QueryStateLike<unknown>
+    /**
+     * Rendered inside the scroll container when `items` is empty and nothing is pending. Omit to
+     * keep today's rendering — an empty box. Works with or without `query`.
+     */
+    emptyState?: ReactNode
+    /**
+     * Number of skeleton rows to render when `isLoading` is true.
+     * @default 5
+     */
+    skeletonRows?: number
+    /** Imperative scroll handle — see {@link BasaltVirtualListHandle}. */
+    ref?: Ref<BasaltVirtualListHandle>
+  }
+
+/**
+ * Imperative escape hatch for {@link BasaltVirtualList} — the virtualizer's own `scrollToIndex` /
+ * `scrollToOffset` / `scrollToEnd` were otherwise unreachable, since the component owns the
+ * `useVirtualizer()` instance internally. `getVirtualizer()` is the full escape hatch for anything
+ * not covered by the three convenience methods (mirrors `./data/table`'s `useReactTable` export as
+ * the table's own escape hatch).
+ *
+ * @example
+ * const listRef = useRef<BasaltVirtualListHandle>(null)
+ * <BasaltVirtualList ref={listRef} items={items} height={400} renderItem={renderRow} getItemKey={(i) => i.id} />
+ * listRef.current?.scrollToIndex(42, { align: 'center' })
+ */
+export type BasaltVirtualListHandle = {
+  /** Scrolls so the item at `index` is in view. */
+  scrollToIndex: (index: number, opts?: ScrollToOptions) => void
+  /** Scrolls the container to a raw pixel `offset`. */
+  scrollToOffset: (offset: number, opts?: ScrollToOptions) => void
+  /** Scrolls to the end of the list. */
+  scrollToEnd: (opts?: Pick<ScrollToOptions, 'behavior'>) => void
   /**
-   * Number of skeleton rows to render when `isLoading` is true.
-   * @default 5
+   * The underlying `@tanstack/react-virtual` instance — the full escape hatch. Returns the RAW
+   * `@tanstack/react-virtual` `Virtualizer`, so a future major of that library reaching this shape
+   * ships here as a plain `feat:` under the no-majors doctrine (`../../CLAUDE.md` "Commit type
+   * discipline"), not a silent break.
    */
-  skeletonRows?: number
+  getVirtualizer: () => Virtualizer<HTMLDivElement, Element>
 }
 
 // ── Component ─────────────────────────────────────────────────────────────────
@@ -96,16 +163,41 @@ export type BasaltVirtualListProps<T> = {
  *   getItemKey={(item) => item.id}
  * />
  */
-export function BasaltVirtualList<T>({
-  items,
-  height,
-  estimateSize = 40,
-  overscan = 5,
-  renderItem,
-  getItemKey,
-  isLoading = false,
-  skeletonRows = 5,
-}: BasaltVirtualListProps<T>) {
+export function BasaltVirtualList<T>(props: BasaltVirtualListProps<T>) {
+  // F-ERR-1: without this, a list missing `items`/`renderItem`/`getItemKey` fails deep inside
+  // `useVirtualizer` as a raw `TypeError` caught by `BasaltErrorBoundary` — a blank subtree with no
+  // message naming any of the three.
+  assertRequiredProps('BasaltVirtualList', props, ['items', 'renderItem', 'getItemKey'])
+  const {
+    items,
+    height,
+    estimateSize = 40,
+    overscan = 5,
+    renderItem,
+    getItemKey,
+    isLoading = false,
+    query,
+    emptyState,
+    skeletonRows = 5,
+    ref,
+    className,
+    style,
+    classNames,
+  } = props
+
+  // `query` resolves the pending branch `isLoading` used to own, plus the error and empty ones the
+  // boolean cannot express — so it wins outright, and says so rather than letting the flag look
+  // broken.
+  useValidateProps(
+    'BasaltVirtualList',
+    () =>
+      query === undefined || props.isLoading === undefined
+        ? null
+        : `${BASALT_PREFIX} BasaltVirtualList: props "query" and "isLoading" are both set — ` +
+          '"query" wins and "isLoading" is ignored. Drop "isLoading".',
+    [query === undefined, props.isLoading === undefined],
+  )
+
   const parentRef = useRef<HTMLDivElement>(null)
 
   const rowVirtualizer = useVirtualizer({
@@ -116,18 +208,55 @@ export function BasaltVirtualList<T>({
     // Silences a React 19 deprecation warning: TanStack Virtual calls flushSync on scroll;
     // setting this to false opts out of that path entirely.
     useFlushSync: false,
-    ...(getItemKey !== undefined && {
-      getItemKey: (index: number) => {
-        const item = items[index]
-        return item !== undefined ? getItemKey(item, index) : index
-      },
-    }),
+    getItemKey: (index: number) => {
+      const item = items[index]
+      return item !== undefined ? getItemKey(item, index) : index
+    },
   })
 
-  if (isLoading) {
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollToIndex: (index, opts) => rowVirtualizer.scrollToIndex(index, opts),
+      scrollToOffset: (offset, opts) => rowVirtualizer.scrollToOffset(offset, opts),
+      scrollToEnd: (opts) => rowVirtualizer.scrollToEnd(opts),
+      getVirtualizer: () => rowVirtualizer,
+    }),
+    [rowVirtualizer],
+  )
+
+  const branch = query === undefined ? undefined : dataQueryBranch('BasaltVirtualList', query)
+  const showSkeleton = branch === undefined ? isLoading : branch === 'pending'
+  // Every non-virtual branch paints into the SAME box at the SAME declared height, so the page does
+  // not reflow as one state resolves into the next.
+  const boxProps = {
+    className: cx(classNames?.root, className),
+    style: {
+      height,
+      // theme-allow raw-scroll-container — matches the virtualizer's own scroll box below, so a
+      // placeholder branch doesn't reflow.
+      overflow: 'auto' as const,
+      ...style,
+    },
+  }
+
+  if (branch === 'error' && query !== undefined) {
+    return (
+      <Box {...boxProps}>
+        <ErrorState
+          error={query.error}
+          title="Could not load"
+          tier="section"
+          retrying={query.fetchStatus === 'fetching'}
+          onRetry={() => void query.refetch()}
+        />
+      </Box>
+    )
+  }
+
+  if (showSkeleton) {
     return (
-      // theme-allow raw-scroll-container — matches the virtualizer's own scroll box below, so the skeleton doesn't reflow.
-      <Box style={{ height, overflow: 'auto' }}>
+      <Box {...boxProps}>
         {Array.from({ length: skeletonRows }, (_, i) => (
           <Box
             key={`skeleton-${i}`}
@@ -150,13 +279,17 @@ export function BasaltVirtualList<T>({
     )
   }
 
+  if (items.length === 0 && emptyState !== undefined) return <Box {...boxProps}>{emptyState}</Box>
+
   return (
     <Box
       ref={parentRef}
+      className={cx(classNames?.root, className)}
       style={{
         height,
         // theme-allow raw-scroll-container — TanStack Virtual measures this element as the scroll container.
         overflow: 'auto',
+        ...style,
       }}
     >
       {/* Inner sizer — defines total scroll height for the virtualizer */}
@@ -172,6 +305,7 @@ export function BasaltVirtualList<T>({
           return (
             <Box
               key={virtualItem.key}
+              className={cx(classNames?.row)}
               style={{
                 position: 'absolute',
                 top: 0,

package/src/data/virtual.ts

@@ -19,4 +19,8 @@
 
 // ── BasaltVirtualList ─────────────────────────────────────────────────────────
 export { BasaltVirtualList } from './virtual-list'
-export type { BasaltVirtualListProps } from './virtual-list'
+export type {
+  BasaltVirtualListHandle,
+  BasaltVirtualListProps,
+  BasaltVirtualListSlot,
+} from './virtual-list'

package/src/forms/FormErrorSummary.tsx

@@ -4,12 +4,14 @@
  */
 import { Alert, List, Text } from '@mantine/core'
 import type { UseFormReturnType } from '@mantine/form'
+import type { BasaltProps } from '../common/props'
+import { assertRequiredProps } from '../common/validate'
 import { alpha, VX } from '../tokens'
 
 // ── FormErrorSummary ──────────────────────────────────────────────────────────
 
 /** Props for FormErrorSummary. */
-export type FormErrorSummaryProps<Values extends Record<string, unknown>> = {
+export type FormErrorSummaryProps<Values extends Record<string, unknown>> = BasaltProps & {
   form: UseFormReturnType<Values>
   /** Accessible heading shown above the error list. Defaults to "Please fix the following errors". */
   title?: string
@@ -30,15 +32,18 @@ export type FormErrorSummaryProps<Values extends Record<string, unknown>> = {
  *   return (
  *     <form onSubmit={form.onSubmit(console.log)}>
  *       <FormErrorSummary form={form} title="Fix these before submitting" />
- *       <TextInput {...field(form, 'email')} label="Email" />
+ *       <TextInput key={fieldKey(form, 'email')} {...inputProps(form, 'email')} label="Email" />
  *     </form>
  *   )
  * }
  */
-export function FormErrorSummary<Values extends Record<string, unknown>>({
-  form,
-  title = 'Please fix the following errors',
-}: FormErrorSummaryProps<Values>) {
+export function FormErrorSummary<Values extends Record<string, unknown>>(
+  props: FormErrorSummaryProps<Values>,
+) {
+  // F-ERR-1: without this, a missing `form` fails deep inside `Object.entries(form.errors)` as a
+  // raw `TypeError` caught by `BasaltErrorBoundary` — a blank subtree with no message naming it.
+  assertRequiredProps('FormErrorSummary', props, ['form'])
+  const { form, title = 'Please fix the following errors', className, style } = props
   const errorEntries = Object.entries(form.errors)
   if (errorEntries.length === 0) return null
 
@@ -46,6 +51,8 @@ export function FormErrorSummary<Values extends Record<string, unknown>>({
     <Alert
       role="alert"
       title={<Text fw={600}>{title}</Text>}
+      {...(className !== undefined && { className })}
+      {...(style !== undefined && { style })}
       styles={{
         root: {
           backgroundColor: alpha(VX.status.bad, 0.13),

package/src/forms/create-form.ts

@@ -29,14 +29,14 @@ export type UseBasaltFormOptions<Values extends Record<string, unknown>> = Omit<
  *
  * @example
  * import * as v from 'valibot'
- * import { useBasaltForm, field } from 'basalt-ui/forms'
+ * import { useBasaltForm, inputProps, fieldKey } from 'basalt-ui/forms'
  *
  * const Schema = v.object({ name: v.pipe(v.string(), v.minLength(2)), email: v.string() })
  * type Values = v.InferOutput<typeof Schema>
  *
  * function MyForm() {
  *   const form = useBasaltForm({ initialValues: { name: '', email: '' }, schema: Schema })
- *   return <TextInput {...field(form, 'name')} label="Name" />
+ *   return <TextInput key={fieldKey(form, 'name')} {...inputProps(form, 'name')} label="Name" />
  * }
  */
 export function useBasaltForm<Values extends Record<string, unknown>>(

package/src/forms/field.ts

@@ -1,30 +1,79 @@
 /**
- * ./forms — field: DX helper for Mantine v9 uncontrolled fields.
+ * ./forms — inputProps + fieldKey: the two-call idiom every Mantine v9 uncontrolled field needs.
  * Mantine-coupled. Optional peer: @mantine/form.
+ *
+ * **`key` is NOT in `inputProps`' return, and that is the whole point of this file's shape.**
+ * It used to be — one object holding `getInputProps(path)` and `form.key(path)` together, so a
+ * single spread covered both. React 19 logs
+ * `A props object containing a "key" prop is being spread into JSX` on every such render: a spread
+ * `key` is read as the element key but the warning says it is deprecated, and three fields meant
+ * three warnings per page. The bundle was basalt's own invention; Mantine's documented idiom is
+ * `key={form.key(path)} {...form.getInputProps(path)}`, and this is that idiom with basalt's names.
+ *
+ * The `@deprecated` `field` alias below did NOT follow it there — it still returns the 1.27 bundle,
+ * because a deprecated export is a schedule and not a silent behaviour change. See its own doc.
  */
 import type { LooseKeys, UseFormReturnType } from '@mantine/form'
 
-// ── field ─────────────────────────────────────────────────────────────────────
+// ── inputProps ────────────────────────────────────────────────────────────────
 
 /**
- * Bundles the two props every Mantine v9 uncontrolled field needs — `getInputProps` spread
- * plus the reconciler `key` — into a single object. Eliminates the two-call boilerplate at
- * every field site.
+ * The spread half: `form.getInputProps(path)`, and nothing else.
+ *
+ * Pair it with {@link fieldKey} — an uncontrolled field renders from a `defaultValue`, so without
+ * the reconciler key React reuses the DOM node and `form.reset()` / `setValues()` / a removed list
+ * row leave the old text on screen.
  *
  * @example
- * import { useBasaltForm, field } from 'basalt-ui/forms'
+ * import { useBasaltForm, inputProps, fieldKey } from 'basalt-ui/forms'
  *
  * function MyForm() {
  *   const form = useBasaltForm({ initialValues: { email: '' } })
- *   return <TextInput {...field(form, 'email')} label="Email" />
+ *   return <TextInput key={fieldKey(form, 'email')} {...inputProps(form, 'email')} label="Email" />
  * }
  */
+export function inputProps<Values extends Record<string, unknown>, Path extends LooseKeys<Values>>(
+  form: UseFormReturnType<Values>,
+  path: Path,
+): ReturnType<UseFormReturnType<Values>['getInputProps']> {
+  return form.getInputProps(path)
+}
+
+/**
+ * The key half: `form.key(path)`, as a JSX `key` attribute — never spread.
+ *
+ * A separate call rather than a second member of {@link inputProps}' object, because an object
+ * carrying `key` cannot be spread without React 19 warning about it. Two calls on one line is the
+ * cost; a clean console and a reconciler that actually resets its inputs is what it buys.
+ *
+ * @example
+ * <TextInput key={fieldKey(form, 'email')} {...inputProps(form, 'email')} />
+ */
+export function fieldKey<Values extends Record<string, unknown>, Path extends LooseKeys<Values>>(
+  form: UseFormReturnType<Values>,
+  path: Path,
+): string {
+  return form.key(path)
+}
+
+/**
+ * @deprecated Renamed to `inputProps` in 1.x — collides with the `field` store builder in
+ * `basalt-ui/state`. Kept until the forms surface next changes; removal ships as a plain `feat:`,
+ * never a major. Write `key={fieldKey(form, path)} {...inputProps(form, path)}` instead.
+ *
+ * **It is NOT `export const field = inputProps` any more, and the difference is the whole point.**
+ * It returns the 1.27 shape — `getInputProps(path)` PLUS `key` — because an alias of the new
+ * `inputProps` would have changed what every existing `<TextInput {...field(form, 'x')} />` does
+ * without changing whether it compiles: the element loses its reconciler key, keeps its old text
+ * through `form.reset()`, and nothing anywhere says so. A deprecated export is a SCHEDULE, not a
+ * behaviour change (`../../CLAUDE.md`, "Deprecation lifecycle"), so this one keeps its behaviour
+ * byte for byte — including the React 19 `A props object containing a "key" prop is being spread
+ * into JSX` warning it has always produced. That warning is the migration signal; `1.29.0` removing
+ * the export is the deadline. `basalt/forms-field-key` reports every remaining call site.
+ */
 export function field<Values extends Record<string, unknown>, Path extends LooseKeys<Values>>(
   form: UseFormReturnType<Values>,
   path: Path,
 ): ReturnType<UseFormReturnType<Values>['getInputProps']> & { key: string } {
-  return {
-    ...form.getInputProps(path),
-    key: form.key(path),
-  }
+  return { ...form.getInputProps(path), key: form.key(path) }
 }