Components

Imperative Surface includes four composition components.

Surface.Body

Surface.Body({
  children,
  className,
  disabled,
  onSubmit,
})

Surface.Body renders a div by default. If onSubmit is supplied, it renders a form.

<Surface.Body
  onSubmit={(event) => {
    event.preventDefault();
    pop(formValue);
  }}
>
  ...
</Surface.Body>

When disabled is true, the body receives aria-busy="true" and the bundled styles reduce interaction opacity.

<Surface.Header
  title="Settings"
  onPop={() => pop()}
  centerTitle
/>

Props include:

If children is provided, it replaces the default header layout.

<Surface.Content className="space-y-4">
  ...
</Surface.Content>

<Surface.Footer>
  <button>Cancel</button>
  <button>Save</button>
</Surface.Footer>

Both Content and Footer accept children and className.