Edit in place, and an explanation

// apps/docs/examples/ui/popover.tsx'use client';
import {useState} from 'react';import {InfoIcon} from 'lucide-react';
import {Button} from '@workspace/active-ui/components/primitives/button';import {  Field,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {Input} from '@workspace/active-ui/components/primitives/input';import {  Popover,  PopoverContent,  PopoverDescription,  PopoverHeader,  PopoverTitle,  PopoverTrigger,} from '@workspace/active-ui/components/primitives/popover';
/** * Content anchored to the element that opened it: a short form that edits * one value in place, and an explanation behind an icon button. The page * stays usable; a click outside or Escape closes the popover. */export default function PopoverExample() {  const [open, setOpen] = useState(false);  const [rate, setRate] = useState('7.5');  const [draft, setDraft] = useState(rate);  return (    <div className="flex flex-wrap items-center justify-center gap-4">      <Popover        open={open}        onOpenChange={(next) => {          setOpen(next);          if (next) setDraft(rate);        }}      >        <PopoverTrigger render={<Button variant="outline" />}>          Contribution rate: {rate}%        </PopoverTrigger>        <PopoverContent className="w-72">          <PopoverHeader>            <PopoverTitle>Contribution rate</PopoverTitle>            <PopoverDescription>              The share of the salary paid into the scheme.            </PopoverDescription>          </PopoverHeader>          <form            className="mt-3 flex items-end gap-2"            onSubmit={(event) => {              event.preventDefault();              setRate(draft);              setOpen(false);            }}          >            <Field>              <FieldLabel htmlFor="popover-rate">Rate in %</FieldLabel>              <Input                id="popover-rate"                inputMode="decimal"                value={draft}                onChange={(event) => setDraft(event.target.value)}              />            </Field>            <Button type="submit">Save</Button>          </form>        </PopoverContent>      </Popover>
      <Popover>        <PopoverTrigger          render={            <Button              variant="ghost"              size="icon"              aria-label="About the waiting period"            />          }        >          <InfoIcon aria-hidden />        </PopoverTrigger>        <PopoverContent side="right" className="w-64">          <PopoverHeader>            <PopoverTitle>Waiting period</PopoverTitle>            <PopoverDescription>              New employees join the scheme after two months of service.            </PopoverDescription>          </PopoverHeader>        </PopoverContent>      </Popover>    </div>  );}