BidPad

Compound bid selection pad. Compose the special-bid rows (flex, equal-width keys) around the 7×N regular grid; validity is derived from the engine context. Omit a BidPad.Bid leaf to hide it. Keys are BidButton atoms.

To compute the flags a BidPad consumes from an auction (isEmpty, isComplete, canDouble, canRedouble, lastContractBid), use getBidPadFlags from @workspace/bridge/auction.

import { BidPad } from '@workspace/ui-bridge/components/bid/bid-pad';

<BidPad.Root onBidSelect={(bid) => console.log(bid)} variant="ghost">
  <BidPad.Table>
    <BidPad.BidsList>
      <BidPad.Bid bid="Pass" />
      <BidPad.Bid bid="Alert" />
    </BidPad.BidsList>
    <BidPad.RegularBids />
    <BidPad.BidsList>
      <BidPad.Bid bid="X" />
      <BidPad.Bid bid="XX" />
    </BidPad.BidsList>
  </BidPad.Table>
</BidPad.Root>

Demo

Without the Alert key

Hiding a special bid is pure composition — omit its BidPad.Bid leaf (no prop).

Styling props

BidPad.Root exposes three styling props:

Fluid sizing sandbox

With sizing="fluid", each key's font / icon / padding follow container-query breakpoints defined in ui-bridge styles.css (section "BidPad fluid pill sizing" — edit the values there, one block per breakpoint). Drag the bottom-right handle to resize the container and watch the breakpoints switch.