feat(sra): Add QR Modal

[OmarBasem]

Closes FS-2282

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
zerodev-signer-demo	Ready	Preview, Comment	Jul 20, 2026 8:17am

[brtkx]

Maybe we could use https://www.npmjs.com/package/uqr? It's more lightweight for what we're trying to do.

[OmarBasem]

@brtkx good suggestion, swapped

[OmarBasem]

Reusable bottom sheet

[brtkx]

Nice looking good! A few changes I'd make here to make it even smoother:

export const Sheet = Dialog.Root
export const SheetClose = Dialog.Close

export function SheetTitle({ className, ...props }: SheetTitleProps) {
  return <Dialog.Title className={cn('zd:sr-only', className)} {...props} />
}

Rename this:

SheetShell -> SheetContent

And remove this line:

<Dialog.Root open={open} onOpenChange={onOpenChange}>

With this alone we can get rid of all the props, except for children and className. The consumer passes open state to Sheet itself. The consumer looks something like this:

<Sheet open={isOpen}>
  <SheetContent>
    <SheetTitle>{title}</SheetTitle >
    {content}
    // If need a close button
    <SheetClose asChild>
      <Button text="Cancel" />
    </SheetClose>
  <SheetContent /> 
</Sheet>

So I'd drop Shell from the name IMO, was my initial suggestion but I think Sheet is enough.

[OmarBasem]

Refactored

[brtkx]

I'd just make the name future-proof and call it a Sheet. So for example, in the future we can do side: 'bottom' | 'right' without introducing breaking changes.

Also we call it BottomSheet but export components like SheetClose, SheetTitle. So there's already an inconsistency we could resolve by Sheet only.

[brtkx]

I'd just keep it in the SRA package. We can't reuse it anywhere else - its content/layout is only relevant to SRA.

Maybe we will be able to do something with it in the future. But going forward when it comes to non-primitive components, even if we have duplicates for a bit, it's much better than early abstractions.

also nit: probs could name it QrSheet since we make a distinction between the two; and it's using Sheet