refactor: narrow FieldChromeContainer's public surface

Replace `Omit<ComponentProps<typeof Box>, 'className'>` on FCC with
explicit `onClick` + `ObfuscatedClassName`. Move `display:flex`,
`align-items:center`, `overflow:hidden` into FCC's CSS. CP keeps its
loose public type (Box props) but only forwards `onClick` to FCC;
other Box props (maxWidth, etc.) are silently dropped pending a
follow-up CP API tightening.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: pawelgrimm

src/control-presentation/control-presentation.tsx

@@ -39,7 +39,7 @@ export type ControlPresentationProps = {
      */
     children: React.ReactNode
 } & ObfuscatedClassName &
-    Omit<ComponentProps<typeof FieldChromeContainer>, 'borderRadius'>
+    Omit<ComponentProps<typeof Box>, 'className'>
 
 /**
  * The visual chrome of an inline, single-row, text-field-style input: a
@@ -55,15 +55,15 @@ export const ControlPresentation = forwardRef<HTMLDivElement, ControlPresentatio
         { startSlot, endSlot, exceptionallySetClassName, children, ...rest },
         ref,
     ) {
+        // Only `onClick` is meaningful to forward to FCC; other Box props are
+        // silently dropped pending CP API tightening in a follow-up.
+        const { onClick } = rest as { onClick?: React.MouseEventHandler<HTMLDivElement> }
         return (
             <FieldChromeContainer
                 ref={ref}
-                {...rest}
                 borderRadius="small"
+                onClick={onClick}
                 exceptionallySetClassName={classNames(styles.container, exceptionallySetClassName)}
-                display="flex"
-                alignItems="center"
-                overflow="hidden"
             >
                 {startSlot ? (
                     <Slot className={[styles.slot, styles.startSlot]}>{startSlot}</Slot>

src/control-presentation/field-chrome-container.module.css

@@ -1,4 +1,8 @@
 .container {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
     /* border */
     border: 1px solid var(--reactist-inputs-idle);
 

src/control-presentation/field-chrome-container.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { type ComponentProps, forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import { Box } from '../box'
 
@@ -9,12 +9,15 @@ import type { ObfuscatedClassName } from '../utils/common-types'
 
 export type FieldChromeContainerProps = {
     /**
-     * The control element to wrap. The wrapper chrome (border, hover/focus,
-     * disabled/read-only background tint, error border) derives from
-     * attributes on this descendant.
+     * The control element (or a layout containing one) to wrap. The wrapper
+     * chrome (border, hover/focus, disabled/read-only background tint, error
+     * border) derives from attributes on the focusable descendant. Clicking
+     * the wrapper focuses the first focusable input/select/textarea
+     * descendant and dispatches a `.click()` (or `.showPicker()` for native
+     * `<select>`).
      *
-     * Clicking the wrapper focuses the first focusable descendant and
-     * dispatches a `.click()` (or `.showPicker()` for native `<select>`).
+     * Contract: assumes a single focusable control descendant. Behavior is
+     * undefined if multiple focusable controls are inside.
      */
     children: React.ReactNode
 
@@ -24,8 +27,16 @@ export type FieldChromeContainerProps = {
      * - `large` — used by `BorderedTextField`'s outlined chrome.
      */
     borderRadius?: 'small' | 'large'
-} & ObfuscatedClassName &
-    Omit<ComponentProps<typeof Box>, 'className'>
+
+    /**
+     * Optional click handler. Fires before the click-to-focus dispatch.
+     * Intended for composition with library wrappers (e.g. Ariakit's
+     * render-prop pattern) that forward an upstream onClick to the chrome
+     * element. Component-level click handling normally lives on the inner
+     * control.
+     */
+    onClick?: React.MouseEventHandler<HTMLDivElement>
+} & ObfuscatedClassName
 
 /**
  * Private primitive shared by `ControlPresentation` and `BorderedTextField`.
@@ -40,16 +51,12 @@ export type FieldChromeContainerProps = {
  */
 export const FieldChromeContainer = forwardRef<HTMLDivElement, FieldChromeContainerProps>(
     function FieldChromeContainer(
-        { borderRadius = 'small', exceptionallySetClassName, children, ...rest },
+        { borderRadius = 'small', exceptionallySetClassName, onClick, children },
         ref,
     ) {
         const controlWrapperRef = React.useRef<HTMLDivElement>(null)
         const isDispatchedReentryRef = React.useRef(false)
 
-        const { onClick, ...restWithoutClick } = rest as typeof rest & {
-            onClick?: React.MouseEventHandler<HTMLDivElement>
-        }
-
         function handleWrapperClick(event: React.MouseEvent<HTMLDivElement>) {
             if (isDispatchedReentryRef.current) {
                 isDispatchedReentryRef.current = false
@@ -86,7 +93,6 @@ export const FieldChromeContainer = forwardRef<HTMLDivElement, FieldChromeContai
         return (
             <Box
                 ref={ref}
-                {...restWithoutClick}
                 className={[
                     styles.container,
                     borderRadius === 'large' ? styles.borderRadiusLarge : styles.borderRadiusSmall,