feat: add ControlPresentation primitive

src/control-presentation/control-action-button.test.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+
+import { render, screen } from '@testing-library/react'
+
+import { ControlActionButton } from './control-action-button'
+
+import styles from './control-presentation.module.css'
+
+describe('ControlActionButton', () => {
+    it('renders the text-label Button branch with compact field styling', () => {
+        render(<ControlActionButton>Clear</ControlActionButton>)
+
+        const button = screen.getByRole('button', { name: 'Clear' })
+        expect(button).toHaveClass(styles.controlActionButton!)
+    })
+
+    it('renders the icon-only IconButton branch with compact field styling', () => {
+        render(<ControlActionButton icon="x" aria-label="Clear" />)
+
+        const button = screen.getByRole('button', { name: 'Clear' })
+        expect(button).toHaveClass(styles.controlActionButton!)
+    })
+})

src/control-presentation/control-action-button.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+
+import classNames from 'classnames'
+
+import { Button, IconButton } from '../button'
+
+import styles from './control-presentation.module.css'
+
+import type { ButtonProps, IconButtonProps } from '../button'
+
+export type ControlActionButtonProps =
+    | ({
+          children: NonNullable<ButtonProps['children']>
+          icon?: never
+      } & Omit<ButtonProps, 'children' | 'variant' | 'size'>)
+    | ({
+          icon: IconButtonProps['icon']
+          children?: never
+      } & Omit<IconButtonProps, 'children' | 'icon' | 'variant' | 'size'>)
+
+/**
+ * A compact action button intended for `ControlPresentation`'s `endSlot`. Wraps
+ * Reactist's `Button` / `IconButton` with a 24×24, 3px-radius variant sized to fit
+ * the field chrome alongside a 16px icon glyph.
+ */
+export const ControlActionButton = React.forwardRef<HTMLButtonElement, ControlActionButtonProps>(
+    function ControlActionButton({ exceptionallySetClassName, ...props }, ref) {
+        const sharedProps = {
+            ref,
+            variant: 'quaternary' as const,
+            exceptionallySetClassName: classNames([
+                styles.controlActionButton,
+                exceptionallySetClassName,
+            ]),
+        }
+
+        return 'children' in props ? (
+            <Button {...props} {...sharedProps} />
+        ) : (
+            <IconButton {...props} {...sharedProps} />
+        )
+    },
+)

src/control-presentation/control-presentation.module.css

@@ -0,0 +1,66 @@
+:root {
+    --reactist-field-height: 32px;
+}
+
+.container {
+    /* sizing */
+    height: var(--reactist-field-height);
+
+    /* slot-to-control gap (only takes effect between rendered children) */
+    gap: 6px;
+
+    /* default outer padding; shrunk on the side(s) where a slot is present */
+    padding-inline: 10px;
+}
+
+/* Conditional outer padding. When a slot is present on a side, shrink
+ * the outer padding on that side; the wrapper's flex `gap` then provides
+ * the visual spacing between the slot and the control. */
+.container:has(.startSlot) {
+    padding-left: 6px;
+}
+
+.container:has(.endSlot) {
+    padding-right: 4px;
+}
+
+.control {
+    display: contents;
+}
+
+/* The wrapped control inherits chrome styling so that native elements
+ * (input/select/textarea) render flush with the surrounding wrapper. */
+.control > * {
+    /* layout */
+    flex: 1;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+
+    /* border */
+    border: none;
+    outline: none; /* focus state is handled by the wrapper border */
+
+    /* color */
+    background: transparent;
+    color: inherit;
+}
+
+.slot {
+    /* color */
+    color: var(--reactist-field-slot-content);
+}
+
+/*
+ * Compact 24×24 action button variant for use inside `endSlot`. The 3px
+ * border-radius and reduced min-width make it fit the field chrome alongside a
+ * 16px icon glyph. The tripled class boosts specificity above Button's
+ * size-class rules (e.g. `.baseButton.size-normal`) so the height override
+ * wins regardless of stylesheet load order.
+ */
+.controlActionButton.controlActionButton.controlActionButton {
+    --reactist-btn-height: 24px;
+    border-radius: 3px;
+    min-width: var(--reactist-btn-height);
+}