Tip Calculator Dialog Block for React

So you can see it without a click. On load the card is a copy drawn in place beside the screen: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Add tip button opens the real card as a non-modal Popover that hangs from the button; Escape closes it and focus goes back to the button, and the copy stays closed until a reload. Both show the same TipFields component and share the block's state, so a tip chosen in the copy is there in the real one. In your app keep the Popover and drop the copy: the "in-place" state and the dialog element beside the screen.

In whole cents. The tip is the bill times the percent, rounded to a cent. The tip and the bill are shared by the people, and each share is rounded up: to the next cent normally, or to the next whole dollar when the switch is on. Rounding adds is what those round-ups come to (what the shares add up to, minus the bill and the tip), the total is the bill, the tip and the rounding, and each person pays the rounded share. A share is never less than its part of the total, so the rounding line is how you see what was added. While a field is wrong the lines show dashes instead of numbers.

Custom turns on the percent field beside the Tip label and moves focus into it; it is always on the card, only switched off until you choose Custom, so choosing it moves nothing. The bill must look like 62.50, the percent can be from 0 to 100 with up to two decimals, and people from 1 to 12. The first problem shows in one slot under the fields, which is always there, when you press Add tip to bill, with focus on the field; once it shows it follows your typing and clears as soon as it is fixed.

No. Add tip to bill writes the tip and the total on the drawn screen, closes the card and says in a polite status message that nothing was paid. The header sentence and the trigger follow it: Change tip replaces Add tip. In your app pass the real bill into the card, send the chosen tip and the number of people to your payment provider when the customer pays, and let the server recompute the figures; the rounding here is a display choice, not a payment rule.

The drawn screen keeps its top, the amount, and the copy shown on load docks over the lower part of the frame with the actions inside it. The real popover is the same card, hung from the button and held inside the screen's width.

Yes. The card is named by its title and described by its sentence, focus starts in the bill field, and Escape closes it and returns focus to the button. The trigger is passed to PopoverTrigger through render, and the popover is controlled with open and onOpenChange. The tips are a group you move through with the arrow keys, each field's problem is tied to it with aria-describedby, the switch is named for what it does, and one polite status message reports the result. The copy shown on load moves no focus; Escape inside it closes it and puts focus on the header button.