Dialog

import { Dialog, Input } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  return () => (
    <>
      <Dialog title="Edit profile" trigger="Open dialog">
        <Input aria-label="Display name" />
      </Dialog>
    </>
  )
}

import { Dialog } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  return () => (
    <>
      <Dialog size="sm" title="Small dialog" trigger="Small" />
      <Dialog size="lg" title="Large dialog" trigger="Large" />
      <Dialog size="xl" title="Extra large dialog" trigger="Extra large" />
    </>
  )
}

import { Dialog, Sidebar, Field, Input } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  const sections = [{ label: 'Workspace', items: [
    { label: 'Inbox', href: '#inbox', badge: '3' },
    { label: 'Projects', href: '#projects' },
  ] }]

  return () => (
    <>
      <Dialog size="xl" title="Settings" trigger="Open settings" flush>
        <Sidebar sections={sections} defaultWidth={208} fixed>
          <Field label="Workspace"><Input defaultValue="Studio" /></Field>
        </Sidebar>
      </Dialog>
    </>
  )
}