@proteos/ui 0.54.1 → 0.56.0

package/src/components/table/table.test.tsx

@@ -1,15 +1,8 @@
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHeader,
-  TableHeaderCell,
-  TableRow,
-} from './table'
+import { Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow } from './table'
 
 describe('Table chrome', () => {
   it('renders semantic ARIA grid roles', () => {
@@ -113,3 +106,89 @@ describe('Table chrome', () => {
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 })
+
+describe('TableHeaderCell resize handle', () => {
+  it('renders no handle without onResize', () => {
+    render(
+      <Table>
+        <TableHeader>
+          <TableHeaderCell ariaLabel="Lane">Lane</TableHeaderCell>
+        </TableHeader>
+      </Table>,
+    )
+    expect(screen.queryByRole('separator')).not.toBeInTheDocument()
+  })
+
+  it('reports the dragged width and never toggles sort', () => {
+    const onResize = vi.fn()
+    const onSortToggle = vi.fn()
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+      width: 160,
+      height: 36,
+      top: 0,
+      left: 0,
+      right: 160,
+      bottom: 36,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    } as DOMRect)
+    render(
+      <Table>
+        <TableHeader>
+          <TableHeaderCell
+            ariaLabel="Lane"
+            sortDirection={null}
+            onSortToggle={onSortToggle}
+            onResize={onResize}
+          >
+            Lane
+          </TableHeaderCell>
+        </TableHeader>
+      </Table>,
+    )
+    // Reports are frame-throttled; run each frame synchronously.
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
+      callback(0)
+      return 0
+    })
+    const handle = screen.getByRole('separator', { name: 'Resize column Lane' })
+    fireEvent.pointerDown(handle, { button: 0, clientX: 100, pointerId: 1 })
+    fireEvent.pointerMove(handle, { clientX: 140, pointerId: 1 })
+    fireEvent.pointerUp(handle, { clientX: 140, pointerId: 1 })
+    fireEvent.click(handle)
+    expect(onResize).toHaveBeenLastCalledWith(200)
+    expect(onSortToggle).not.toHaveBeenCalled()
+    vi.restoreAllMocks()
+  })
+
+  it('clamps to minWidth and resizes by keyboard', () => {
+    const onResize = vi.fn()
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+      width: 70,
+      height: 36,
+      top: 0,
+      left: 0,
+      right: 70,
+      bottom: 36,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    } as DOMRect)
+    render(
+      <Table>
+        <TableHeader>
+          <TableHeaderCell ariaLabel="Lane" onResize={onResize} minWidth={64}>
+            Lane
+          </TableHeaderCell>
+        </TableHeader>
+      </Table>,
+    )
+    const handle = screen.getByRole('separator', { name: 'Resize column Lane' })
+    fireEvent.keyDown(handle, { key: 'ArrowLeft' })
+    expect(onResize).toHaveBeenLastCalledWith(64)
+    fireEvent.keyDown(handle, { key: 'ArrowRight' })
+    expect(onResize).toHaveBeenLastCalledWith(78)
+    vi.restoreAllMocks()
+  })
+})

package/src/components/table/table.tsx

@@ -59,7 +59,9 @@ const tableHeaderStyles = tv({
     'border-b border-rule',
   ],
   variants: {
-    sticky: { true: 'sticky top-0 z-[2]', false: '' },
+    // z-[4]: above an editing row (z-[3]) — sticky chrome stays on top of
+    // rows scrolling underneath, popped-out editors included.
+    sticky: { true: 'sticky top-0 z-[4]', false: '' },
   },
   defaultVariants: { sticky: false },
 })
@@ -109,7 +111,8 @@ export const tableHeaderCellStyles = tv({
     },
     sticky: {
       left: 'sticky left-0 z-[3] bg-[color-mix(in_oklab,var(--color-surface-2)_60%,var(--color-surface))]',
-      right: 'sticky right-0 z-[3] bg-[color-mix(in_oklab,var(--color-surface-2)_60%,var(--color-surface))]',
+      right:
+        'sticky right-0 z-[3] bg-[color-mix(in_oklab,var(--color-surface-2)_60%,var(--color-surface))]',
       false: '',
     },
   },
@@ -164,6 +167,14 @@ export type TableHeaderCellProps = Omit<HTMLAttributes<HTMLDivElement>, 'onClick
   onRemove?: () => void
   /** Aria label fragment used in the remove button label and any drag a11y. */
   ariaLabel?: string
+  /**
+   * When provided, renders a resize handle on the trailing edge. Dragging it
+   * (or focusing it and pressing ←/→) reports the new width; the column is
+   * controlled, so the parent decides what to do with it.
+   */
+  onResize?: (width: number) => void
+  /** Smallest width the resize handle will report. Defaults to 64. */
+  minWidth?: number
 }
 
 export function TableHeaderCell({
@@ -179,11 +190,63 @@ export function TableHeaderCell({
   onRemove,
   ariaLabel,
   sticky = false,
+  onResize,
+  minWidth = 64,
   ...rest
 }: TableHeaderCellProps) {
   const cellRef = useRef<HTMLDivElement | null>(null)
   const handleRef = useRef<HTMLSpanElement | null>(null)
   const [dragState, setDragState] = useState<DragState>({ kind: 'idle' })
+  const [isResizing, setIsResizing] = useState(false)
+
+  /* Column resize — pointer capture on the handle so the drag survives the
+     pointer leaving the header, one report per animation frame so a busy
+     table re-renders at most 60×/s. The reported width is the cell's live
+     box width plus the pointer delta, never below `minWidth`. */
+  const startResize = (event: React.PointerEvent<HTMLSpanElement>) => {
+    if (!onResize || event.button !== 0) return
+    const cell = cellRef.current
+    if (!cell) return
+    event.preventDefault()
+    event.stopPropagation()
+    const handle = event.currentTarget
+    const startX = event.clientX
+    const startWidth = cell.getBoundingClientRect().width
+    if (typeof handle.setPointerCapture === 'function') handle.setPointerCapture(event.pointerId)
+    setIsResizing(true)
+    document.body.style.cursor = 'col-resize'
+    let frame = 0
+    const report = (clientX: number) => {
+      const next = Math.max(minWidth, Math.round(startWidth + clientX - startX))
+      if (typeof requestAnimationFrame !== 'function') {
+        onResize(next)
+        return
+      }
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(() => onResize(next))
+    }
+    const onMove = (move: PointerEvent) => report(move.clientX)
+    const onEnd = () => {
+      handle.removeEventListener('pointermove', onMove)
+      handle.removeEventListener('pointerup', onEnd)
+      handle.removeEventListener('pointercancel', onEnd)
+      document.body.style.cursor = ''
+      setIsResizing(false)
+    }
+    handle.addEventListener('pointermove', onMove)
+    handle.addEventListener('pointerup', onEnd)
+    handle.addEventListener('pointercancel', onEnd)
+  }
+
+  const resizeByKey = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+    if (!onResize) return
+    const step = event.key === 'ArrowRight' ? 8 : event.key === 'ArrowLeft' ? -8 : 0
+    if (step === 0) return
+    event.preventDefault()
+    event.stopPropagation()
+    const current = cellRef.current?.getBoundingClientRect().width ?? minWidth
+    onResize(Math.max(minWidth, Math.round(current + step)))
+  }
 
   useEffect(() => {
     if (!isDraggable || !columnId) return
@@ -203,13 +266,9 @@ export function TableHeaderCell({
       }),
       dropTargetForElements({
         element: cell,
-        canDrop: ({ source }) =>
-          isColumnDragData(source.data) && source.data.columnId !== columnId,
+        canDrop: ({ source }) => isColumnDragData(source.data) && source.data.columnId !== columnId,
         getData: ({ input, element }) =>
-          attachClosestEdge(
-            { ...data },
-            { input, element, allowedEdges: ['left', 'right'] },
-          ),
+          attachClosestEdge({ ...data }, { input, element, allowedEdges: ['left', 'right'] }),
         getIsSticky: () => true,
         onDragEnter: ({ self }) => {
           const edge = extractClosestEdge(self.data)
@@ -238,6 +297,7 @@ export function TableHeaderCell({
     const target = e.target as HTMLElement
     if (target.closest('[data-dnd-handle="true"]')) return
     if (target.closest('[data-column-remove="true"]')) return
+    if (target.closest('[data-column-resize="true"]')) return
     onSortToggle?.()
   }
 
@@ -292,7 +352,11 @@ export function TableHeaderCell({
       <span
         className={cn(
           'flex items-center gap-[7px] min-w-0 flex-1',
-          align === 'right' ? 'justify-end' : align === 'center' ? 'justify-center' : 'justify-start',
+          align === 'right'
+            ? 'justify-end'
+            : align === 'center'
+              ? 'justify-center'
+              : 'justify-start',
         )}
       >
         <span className="truncate">{children}</span>
@@ -328,6 +392,40 @@ export function TableHeaderCell({
           )}
         />
       ) : null}
+
+      {onResize ? (
+        // Sits astride the trailing separator: an 8px grab zone with a 2px
+        // bar that lights up on hover, focus and while dragging. A focusable
+        // separator is the ARIA pattern for a resizer (no semantic element
+        // exists for it); its value is the column width when one is known.
+        // biome-ignore lint/a11y/useSemanticElements: interactive vertical resizer — <hr> cannot be one
+        <span
+          role="separator"
+          aria-orientation="vertical"
+          aria-label={`Resize column ${ariaLabel ?? 'column'}`}
+          aria-valuemin={minWidth}
+          aria-valuenow={typeof width === 'number' ? width : undefined}
+          tabIndex={0}
+          data-column-resize="true"
+          onPointerDown={startResize}
+          onKeyDown={resizeByKey}
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            'group/resize absolute inset-y-0 -right-1 z-10 w-2 cursor-col-resize outline-none',
+            'flex justify-center',
+          )}
+        >
+          <span
+            aria-hidden="true"
+            className={cn(
+              'h-full w-0.5 transition-colors',
+              isResizing
+                ? 'bg-accent'
+                : 'bg-transparent group-hover/resize:bg-accent group-focus-visible/resize:bg-accent',
+            )}
+          />
+        </span>
+      ) : null}
     </div>
   )
 }
@@ -407,7 +505,12 @@ const tableScrollerStyles = tv({
 
 export function TableScroller({ className, ref, ...props }: TableBodyProps) {
   return (
-    <div role="presentation" ref={ref} {...props} className={cn(tableScrollerStyles(), className)} />
+    <div
+      role="presentation"
+      ref={ref}
+      {...props}
+      className={cn(tableScrollerStyles(), className)}
+    />
   )
 }
 
@@ -424,8 +527,28 @@ const rowStripeBg = 'bg-[color-mix(in_oklab,var(--color-ink)_var(--row-stripe),v
 const rowHoverBg =
   'hover:bg-[color-mix(in_oklab,var(--color-ink)_var(--row-hover),var(--color-bg))]'
 
+/* Inline cell editors that outgrow the row (a chip picker, say) escape the
+   cell clip by marking their host `data-cell-editing`: the row lifts above
+   its neighbours and the cell drops its overflow clip, so an editor sized
+   taller than the row pops out over the rows above and below. The app-side
+   wrapper sets the attribute and positions the editor absolutely inside the
+   cell. Virtualized rows are transformed (own stacking context), hence the
+   z-index has to sit on the row, not only on the cell. Rows and cells are
+   positioned unconditionally (`relative`, overridden by the absolute /
+   sticky variants) so the z-index applies without the `:has()` rule ever
+   touching `position` — a `:has()` rule outranks a plain utility, and
+   forcing `relative` on a virtualized row would drop it into normal flow
+   and shove every row after it down by one. */
+const cellEditingRow = 'has-[[data-cell-editing]]:z-[3]'
+const cellEditingCell = 'has-[[data-cell-editing]]:z-[3] has-[[data-cell-editing]]:overflow-visible'
+
 const tableRowStyles = tv({
-  base: ['flex items-stretch', 'border-b border-rule-2 last:border-b-0', 'bg-bg'],
+  base: [
+    'relative flex items-stretch',
+    'border-b border-rule-2 last:border-b-0',
+    'bg-bg',
+    cellEditingRow,
+  ],
   variants: {
     alt: {
       true: rowStripeBg,
@@ -436,7 +559,9 @@ const tableRowStyles = tv({
       false: rowHoverBg,
     },
     absolute: {
-      true: 'absolute left-0 right-0',
+      // `top-0` pins the static position: a virtualized row must never
+      // inherit a flow offset from a sibling that is in normal flow.
+      true: 'absolute top-0 left-0 right-0',
       false: '',
     },
   },
@@ -481,11 +606,12 @@ export function TableRow({
 
 export const tableCellStyles = tv({
   base: [
-    'flex items-center shrink-0 min-w-0',
+    'relative flex items-center shrink-0 min-w-0',
     'px-[14px]',
     'whitespace-nowrap overflow-hidden text-ellipsis',
     'font-sans text-[13px] tracking-[-0.005em]',
     'text-ink-2',
+    cellEditingCell,
   ],
   variants: {
     align: {

package/src/components/tag-input/tag-input.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useState } from 'react'
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 
 import { TagInput } from './tag-input'
 
@@ -78,3 +78,69 @@ describe('TagInput', () => {
     expect(onChange).not.toHaveBeenCalled()
   })
 })
+
+describe('TagInput — inline cell editor', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('stays one row tall while the chips fit on a line', () => {
+    render(<TagInput value={['alpha', 'beta']} onChange={() => {}} appearance="cell" />)
+    const box = screen.getByRole('textbox').closest('.h-\\[29px\\]')
+    expect(box).not.toBeNull()
+  })
+
+  it('grows to two rows with a scroll area once the chips wrap', () => {
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function (
+      this: Element,
+    ) {
+      const index = this.parentElement ? Array.from(this.parentElement.children).indexOf(this) : 0
+      const top = index > 1 ? 30 : 0
+      return {
+        top,
+        bottom: top + 23,
+        height: 23,
+        left: 0,
+        right: 40,
+        width: 40,
+        x: 0,
+        y: top,
+        toJSON: () => ({}),
+      } as DOMRect
+    })
+    render(<TagInput value={['alpha', 'beta', 'gamma']} onChange={() => {}} appearance="cell" />)
+    const box = screen.getByRole('textbox').closest('.h-\\[64px\\]')
+    expect(box).not.toBeNull()
+    expect(box?.querySelector('.overflow-y-auto')).not.toBeNull()
+  })
+})
+
+describe('TagInput — Enter inside a keyboard-navigating host', () => {
+  it('keeps Enter to itself when it commits a tag', async () => {
+    const user = userEvent.setup()
+    const onHostKeyDown = vi.fn()
+    const onChange = vi.fn()
+    render(
+      // biome-ignore lint/a11y/noStaticElementInteractions: test host mimicking the table cell wrapper
+      <div onKeyDown={onHostKeyDown}>
+        <TagInput value={[]} onChange={onChange} />
+      </div>,
+    )
+    await user.type(screen.getByRole('textbox'), 'alpha{Enter}')
+    expect(onChange).toHaveBeenCalledWith(['alpha'])
+    expect(onHostKeyDown.mock.calls.some(([event]) => event.key === 'Enter')).toBe(false)
+  })
+
+  it('lets Enter reach the host when there is nothing to commit', async () => {
+    const user = userEvent.setup()
+    const onHostKeyDown = vi.fn()
+    render(
+      // biome-ignore lint/a11y/noStaticElementInteractions: test host mimicking the table cell wrapper
+      <div onKeyDown={onHostKeyDown}>
+        <TagInput value={['alpha']} onChange={() => {}} />
+      </div>,
+    )
+    await user.type(screen.getByRole('textbox'), '{Enter}')
+    expect(onHostKeyDown.mock.calls.some(([event]) => event.key === 'Enter')).toBe(true)
+  })
+})

package/src/components/tag-input/tag-input.tsx

@@ -1,27 +1,41 @@
-import { type KeyboardEvent, type ReactNode, useEffect, useId, useRef, useState } from 'react'
+import {
+  type KeyboardEvent,
+  type ReactNode,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
 import { cn } from '../../lib/cn'
+import { Badge, BadgeAction } from '../badge/badge'
 import {
   type FieldAppearance,
+  type FieldSize,
   fieldChipPadding,
   fieldControlStyles,
   fieldErrorStyles,
   fieldHintStyles,
   fieldLabelStyles,
   fieldMinHeight,
-  type FieldSize,
   fieldTextStyles,
 } from '../field/field'
+import { useChipRowWrap } from '../field/use-chip-row-wrap'
 
 /* =========================================================================
    TagInput — free-form list of strings rendered as removable chips.
    Used for filter `in`/`not_in` value entry on non-enum types where the
-   set of valid values isn't known up front.
+   set of valid values isn't known up front, and for `array` attributes.
 
    Behaviour:
      - Type into the trailing input → Enter or `,` commits as a tag.
      - Backspace on empty input → removes the last tag.
      - Click × on a chip → removes it.
 
+   Chips are the enum-value Badge (rounded, no dot, active register) with
+   the × in the badge's `actions` slot — the same chip the read-only
+   Display shows, so view ↔ edit toggles don't restyle the values.
+
    Controlled API only — `value: string[]` + `onChange`.
    ========================================================================= */
 
@@ -69,17 +83,31 @@ export function TagInput({
     appearance === 'cell'
       ? 'focus-within:border-accent focus-within:shadow-none'
       : 'focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]'
-  const minHeight = appearance === 'cell' ? 'min-h-[29px]' : fieldMinHeight[size]
+  const isCell = appearance === 'cell'
   const inputRef = useRef<HTMLInputElement>(null)
+  const chipsRef = useRef<HTMLDivElement>(null)
+  // Cell editor height follows the content: one row while the chips (and
+  // the entry input) fit on a line, the two-row pop-out once they wrap.
+  const hasWrapped = useChipRowWrap(chipsRef, isCell, JSON.stringify(value))
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only — autoFocus is a one-shot signal, not sustained.
   useEffect(() => {
     if (autoFocus) inputRef.current?.focus()
-    // mount-only — autoFocus is a one-shot signal, not sustained.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
   const inputId = useId()
   const [draft, setDraft] = useState('')
 
+  // Committing a tag pushes the entry input further down the wrapping row —
+  // in the scrolling cell box that can be out of view. Keep it visible while
+  // it holds focus; an outside value change must never scroll anything.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `value` is the re-run trigger (a commit re-flows the row); it is not read inside.
+  useLayoutEffect(() => {
+    const input = inputRef.current
+    if (!isCell || !input || document.activeElement !== input) return
+    if (typeof input.scrollIntoView !== 'function') return
+    input.scrollIntoView({ block: 'nearest' })
+  }, [isCell, value])
+
   const commit = () => {
     const v = draft.trim()
     if (!v) return
@@ -98,7 +126,13 @@ export function TagInput({
   const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter' || e.key === ',') {
       e.preventDefault()
-      commit()
+      if (draft.trim()) {
+        // Committing a tag is the whole gesture: the host must not also read
+        // the Enter — an inline table cell would move to the next row. Enter
+        // on an empty entry still bubbles, so it can mean "done with this cell".
+        e.stopPropagation()
+        commit()
+      }
       return
     }
     if (e.key === 'Backspace' && !draft && value.length > 0) {
@@ -120,68 +154,68 @@ export function TagInput({
         data-disabled={isDisabled || undefined}
         className={cn(
           styles.box(),
-          'flex flex-wrap items-center gap-1',
-          minHeight,
-          fieldChipPadding[size],
+          'flex',
+          // Cell editor: one table row (29px under a 32px row) while the chips
+          // fit on a line; two rows (64px), popping out of the row, once they
+          // wrap — the chips then scroll inside. Field mode grows with its
+          // content.
+          isCell
+            ? hasWrapped
+              ? 'h-[64px] p-1'
+              : 'h-[29px] px-1 py-0'
+            : [fieldChipPadding[size], fieldMinHeight[size]],
           focusWithin,
         )}
       >
-        {value.map((tag, idx) => (
-          // tags are kept unique on commit, so the value alone is a stable key
-          <span
-            key={tag}
-            className={cn(
-              'inline-flex items-center gap-1',
-              'px-1.5 py-0.5 rounded-sm bg-surface-3',
-              'font-mono text-[12px] text-ink-2',
-            )}
-          >
-            <span className="max-w-[10rem] truncate">{tag}</span>
-            <button
-              type="button"
-              aria-label={`Remove ${tag}`}
-              disabled={isDisabled}
-              onClick={() => remove(idx)}
-              className={cn(
-                'inline-flex items-center justify-center',
-                'size-3.5 rounded-full text-ink-3 hover:text-ink hover:bg-surface-2',
-                'cursor-pointer outline-none',
-                'focus-visible:shadow-[var(--shadow-focus)]',
-                'disabled:opacity-45 disabled:cursor-not-allowed',
-              )}
-            >
-              <svg aria-hidden viewBox="0 0 10 10" className="size-2" fill="none">
-                <path
-                  d="M2 2l6 6M8 2l-6 6"
-                  stroke="currentColor"
-                  strokeWidth="1.4"
-                  strokeLinecap="round"
-                />
-              </svg>
-            </button>
-          </span>
-        ))}
-
-        <input
-          ref={inputRef}
-          id={inputId}
-          type={inputType}
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={onKeyDown}
-          onBlur={commit}
-          disabled={isDisabled}
-          placeholder={value.length === 0 ? placeholder : ''}
+        <div
+          ref={chipsRef}
           className={cn(
-            'flex-1 min-w-[6rem] bg-transparent outline-none',
-            'font-sans text-ink placeholder:text-ink-4',
-            fieldTextStyles[size],
-            // No vertical padding — wrapper's p-1.5 + min-h-[size] govern the
-            // overall height so it matches Input/Select at the same size.
-            'px-1.5',
-            'disabled:cursor-not-allowed disabled:opacity-45',
+            'flex flex-1 flex-wrap items-center gap-1.5 min-w-0',
+            isCell &&
+              (hasWrapped ? 'content-start overflow-y-auto' : 'content-center overflow-hidden'),
           )}
-        />
+        >
+          {value.map((tag, idx) => (
+            // tags are kept unique on commit, so the value alone is a stable key
+            <Badge
+              key={tag}
+              variant="active"
+              shape="rounded"
+              hasDot={false}
+              className="shrink-0"
+              actions={
+                <BadgeAction
+                  label={`Remove ${tag}`}
+                  onPress={() => remove(idx)}
+                  isDisabled={isDisabled}
+                />
+              }
+            >
+              <span className="max-w-[10rem] truncate">{tag}</span>
+            </Badge>
+          ))}
+
+          <input
+            ref={inputRef}
+            id={inputId}
+            type={inputType}
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={onKeyDown}
+            onBlur={commit}
+            disabled={isDisabled}
+            placeholder={value.length === 0 ? placeholder : ''}
+            className={cn(
+              'flex-1 min-w-[6rem] bg-transparent outline-none',
+              'font-sans text-ink placeholder:text-ink-4',
+              fieldTextStyles[size],
+              // No vertical padding — wrapper's p-1.5 + min-h-[size] govern the
+              // overall height so it matches Input/Select at the same size.
+              'px-1.5',
+              'disabled:cursor-not-allowed disabled:opacity-45',
+            )}
+          />
+        </div>
       </div>
 
       {description ? <p className={fieldHintStyles}>{description}</p> : null}

package/src/index.ts

@@ -3,6 +3,7 @@ export * from './components/attribute-type-icon'
 export * from './components/avatar'
 export * from './components/avatar-group'
 export * from './components/badge'
+export * from './components/badge-group'
 export * from './components/badge-multi-select'
 export * from './components/breadcrumbs'
 export * from './components/button'