UI Bridge
Contract pills
Status pills and hooks for the contract resulting from an auction.
Import from @workspace/ui-bridge/contract/contract-pill, @workspace/ui-bridge/contract/declarer-pill or @workspace/ui-bridge/contract/hooks/*. Pills wrap a ContractLabel atom in design-system Pill chrome.
ContractPill
Status pill showing the current contract state with color-coded indicators:
- Green — confirmed contract (after 3 passes)
- Orange — candidate contract (before 3 passes)
- Red — no contract yet
import { ContractPill } from '@workspace/ui-bridge/contract/contract-pill';
<ContractPill
contract={null}
candidate={{ level: 4, suit: 'S', doubled: 'none', declarer: 'N' }}
areAuctionsEnabled={true}
/>Props
Prop
Type
DeclarerPill
Status pill showing the declarer (extracted from the confirmed contract).
import { DeclarerPill } from '@workspace/ui-bridge/contract/declarer-pill';
<DeclarerPill
contract={{ level: 4, suit: 'S', doubled: 'none', declarer: 'N' }}
areAuctionsEnabled={true}
/>Props
Prop
Type
Hooks
useContractResult
Hook to get the contract result from an Auction.
import { useContractResult } from '@workspace/ui-bridge/contract/hooks/use-contract-result';
const { result, declarer, isCandidate } = useContractResult(auction);
// result?.type === 'confirmed' | 'candidate'
// result?.value is the ContractuseTrump
Hook to get the trump suit from an Auction. Uses the candidate contract if not yet confirmed.
import { useTrump } from '@workspace/ui-bridge/contract/hooks/use-trump';
const trump = useTrump(auction);
// trump = "S" | "H" | "D" | "C" | null