Support native dialog

[jim-king-2000]

How to use native <dialog> with heroui v3?

<button command="show-modal" commandfor="my-dialog">Open dialog</button>

<dialog id="my-dialog">
  <p>This dialog was opened using an invoker command.</p>
  <button commandfor="my-dialog" command="close">Close</button>
</dialog>

Is there any easy way to change the code above to heroui style?

[jim-king-2000]

I build one, which is amazing:

'use client'

import { Button, Modal } from '@heroui/react'
import { Rocket } from '@gravity-ui/icons'

export default function Page() {
  return (
    <Modal>
      <Button
        render={(domProps) => (
          <button {...domProps} command='show-modal' commandfor='my-dialog' />
        )}
      >
        Open Modal
      </Button>
      <dialog
        id='my-dialog'
        className='sm:max-w-[360px] m-auto bg-overlay hidden open:block p-3 rounded-3xl'
      >
        <Modal.CloseTrigger
          render={(domProps) => (
            <button {...domProps} command='close' commandfor='my-dialog' />
          )}
        />
        <Modal.Header>
          <Modal.Icon className='bg-default text-foreground'>
            <Rocket className='size-5' />
          </Modal.Icon>
          <Modal.Heading>Welcome to HeroUI</Modal.Heading>
        </Modal.Header>
        <Modal.Body>
          <p>
            A beautiful, fast, and modern React UI library for building
            accessible and customizable web applications with ease.
          </p>
        </Modal.Body>
        <Modal.Footer>
          <Button
            className='w-full'
            render={(domProps) => (
              <button {...domProps} command='close' commandfor='my-dialog' />
            )}
          >
            Continue
          </Button>
        </Modal.Footer>
      </dialog>
    </Modal>
  )
}

[jim-king-2000]

Can't use <Button> directly.

// This can't work
<Button className='ring-0' command='show-modal' commandfor='my-dialog'>
  Open Modal
</Button>

The two properties command and commandfor are not set to the underlying <button> element which I suspect it might be a bug.